<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>Butterfly 文檔(三) 主題配置 | Xing's Blog</title><meta name="author" content="xing"><meta name="copyright" content="xing"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="Butterfly 文檔(三) 主題配置">
<meta property="og:type" content="article">
<meta property="og:title" content="Butterfly 文檔(三) 主題配置">
<meta property="og:url" content="https://veryxing.github.io/article/a2c7de2.html">
<meta property="og:site_name" content="Xing&#39;s Blog">
<meta property="og:description" content="Butterfly 文檔(三) 主題配置">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-03-cover.png">
<meta property="article:published_time" content="2020-05-28T14:36:02.000Z">
<meta property="article:modified_time" content="2024-10-31T15:14:39.902Z">
<meta property="article:author" content="xing">
<meta property="article:tag" content="教程">
<meta property="article:tag" content="Hexo">
<meta property="article:tag" content="主題">
<meta property="article:tag" content="butterfly">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-03-cover.png"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://veryxing.github.io/article/a2c7de2.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"><script>
    (() => {
      
    const saveToLocal = {
      set: (key, value, ttl) => {
        if (!ttl) return
        const expiry = Date.now() + ttl * 86400000
        localStorage.setItem(key, JSON.stringify({ value, expiry }))
      },
      get: key => {
        const itemStr = localStorage.getItem(key)
        if (!itemStr) return undefined
        const { value, expiry } = JSON.parse(itemStr)
        if (Date.now() > expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return value
      }
    }

    window.btf = {
      saveToLocal,
      getScript: (url, attr = {}) => new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = url
        script.async = true
        Object.entries(attr).forEach(([key, val]) => script.setAttribute(key, val))
        script.onload = script.onreadystatechange = () => {
          if (!script.readyState || /loaded|complete/.test(script.readyState)) resolve()
        }
        script.onerror = reject
        document.head.appendChild(script)
      }),
      getCSS: (url, id) => new Promise((resolve, reject) => {
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = url
        if (id) link.id = id
        link.onload = link.onreadystatechange = () => {
          if (!link.readyState || /loaded|complete/.test(link.readyState)) resolve()
        }
        link.onerror = reject
        document.head.appendChild(link)
      }),
      addGlobalFn: (key, fn, name = false, parent = window) => {
        if (!true && key.startsWith('pjax')) return
        const globalFn = parent.globalFn || {}
        globalFn[key] = globalFn[key] || {}
        if (name && globalFn[key][name]) return
        globalFn[key][name || Object.keys(globalFn[key]).length] = fn
        parent.globalFn = globalFn
      }
    }
  
      
      const activateDarkMode = () => {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      const activateLightMode = () => {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }

      btf.activateDarkMode = activateDarkMode
      btf.activateLightMode = activateLightMode

      const theme = saveToLocal.get('theme')
    
          theme === 'dark' ? activateDarkMode() : theme === 'light' ? activateLightMode() : null
        
      
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        document.documentElement.classList.toggle('hide-aside', asideStatus === 'hide')
      }
    
      
    const detectApple = () => {
      if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)) {
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
  
    })()
  </script><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.json","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"未找到符合您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false,"highlightFullpage":false,"highlightMacStyle":true},
  copy: {
    success: '复制成功',
    error: '复制失败',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'null',
  Snackbar: undefined,
  infinitegrid: {
    js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js',
    buttonText: '加载更多'
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Butterfly 文檔(三) 主題配置',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2024-10-31 23:14:39'
}</script><meta name="generator" content="Hexo 7.3.0"><link rel="alternate" href="/atom.xml" title="Xing's Blog" type="application/atom+xml">
</head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "/images/2.gif" data-lazy-src="/img/butterfly-icon.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">59</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">9</div></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/gallery/"><i class="fa-fw fas fa-folder-open"></i><span> 图库</span></a></div><div class="menus_item"><a class="site-page" href="/shuoshuo/"><i class="fa-fw fas fa-folder-open"></i><span> 说说</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url(https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-03-cover.png);"><nav id="nav"><span id="blog-info"><a class="nav-site-title" href="/"><span class="site-name">Xing's Blog</span></a><a class="nav-page-title" href="/"><span class="site-name">Butterfly 文檔(三) 主題配置</span></a></span><div id="menus"><div id="search-button"><span class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></span></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/gallery/"><i class="fa-fw fas fa-folder-open"></i><span> 图库</span></a></div><div class="menus_item"><a class="site-page" href="/shuoshuo/"><i class="fa-fw fas fa-folder-open"></i><span> 说说</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><span class="site-page"><i class="fas fa-bars fa-fw"></i></span></div></div></nav><div id="post-info"><h1 class="post-title">Butterfly 文檔(三) 主題配置</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2020-05-28T14:36:02.000Z" title="发表于 2020-05-28 22:36:02">2020-05-28</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-10-31T15:14:39.902Z" title="更新于 2024-10-31 23:14:39">2024-10-31</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Docs%E6%96%87%E6%AA%94/">Docs文檔</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title=""><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">浏览量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><div class="note green icon-padding flat"><i class="note-icon fas fa-rocket"></i><p>📚 文檔目錄</p>
<p><a href="/article/70021e6e.html" title="Butterfly 文檔(一) 快速開始">🚀 快速開始</a> - <a href="/article/6b50bc45.html" title="Butterfly 文檔(二) 主題頁面">📑 主題頁面</a> - <a href="/article/a2c7de2.html" title="Butterfly 文檔(三) 主題配置">📌 主題配置</a> - <a href="/article/d9078dbf.html" title="Butterfly 文檔(四) 標簽外挂">⚔️ 標簽外挂</a> - <a href="/article/405e153.html" title="Butterfly 文檔(五) 主題問答">❓ 主題問答</a> - <a href="/article/fa36e355.html" title="Butterfly 文檔(六) 進階教程">⚡️ 進階教程</a></p>
</div>

<div class="note orange icon-padding flat"><i class="note-icon fas fa-magic"></i><p>你可以通過右下角的 <strong>簡</strong> 按鈕切換為簡體顯示</p>
</div>

<hr>
<h2 id="配置文件速讀"><a href="#配置文件速讀" class="headerlink" title="配置文件速讀"></a>配置文件速讀</h2><p>你可以快速瞭解到所有配置的註解，讓你配置文件更加方便。<br>如果遇到不太清楚的配置，可以在這篇文章找到更加詳細的資訊。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br><span class="line">427</span><br><span class="line">428</span><br><span class="line">429</span><br><span class="line">430</span><br><span class="line">431</span><br><span class="line">432</span><br><span class="line">433</span><br><span class="line">434</span><br><span class="line">435</span><br><span class="line">436</span><br><span class="line">437</span><br><span class="line">438</span><br><span class="line">439</span><br><span class="line">440</span><br><span class="line">441</span><br><span class="line">442</span><br><span class="line">443</span><br><span class="line">444</span><br><span class="line">445</span><br><span class="line">446</span><br><span class="line">447</span><br><span class="line">448</span><br><span class="line">449</span><br><span class="line">450</span><br><span class="line">451</span><br><span class="line">452</span><br><span class="line">453</span><br><span class="line">454</span><br><span class="line">455</span><br><span class="line">456</span><br><span class="line">457</span><br><span class="line">458</span><br><span class="line">459</span><br><span class="line">460</span><br><span class="line">461</span><br><span class="line">462</span><br><span class="line">463</span><br><span class="line">464</span><br><span class="line">465</span><br><span class="line">466</span><br><span class="line">467</span><br><span class="line">468</span><br><span class="line">469</span><br><span class="line">470</span><br><span class="line">471</span><br><span class="line">472</span><br><span class="line">473</span><br><span class="line">474</span><br><span class="line">475</span><br><span class="line">476</span><br><span class="line">477</span><br><span class="line">478</span><br><span class="line">479</span><br><span class="line">480</span><br><span class="line">481</span><br><span class="line">482</span><br><span class="line">483</span><br><span class="line">484</span><br><span class="line">485</span><br><span class="line">486</span><br><span class="line">487</span><br><span class="line">488</span><br><span class="line">489</span><br><span class="line">490</span><br><span class="line">491</span><br><span class="line">492</span><br><span class="line">493</span><br><span class="line">494</span><br><span class="line">495</span><br><span class="line">496</span><br><span class="line">497</span><br><span class="line">498</span><br><span class="line">499</span><br><span class="line">500</span><br><span class="line">501</span><br><span class="line">502</span><br><span class="line">503</span><br><span class="line">504</span><br><span class="line">505</span><br><span class="line">506</span><br><span class="line">507</span><br><span class="line">508</span><br><span class="line">509</span><br><span class="line">510</span><br><span class="line">511</span><br><span class="line">512</span><br><span class="line">513</span><br><span class="line">514</span><br><span class="line">515</span><br><span class="line">516</span><br><span class="line">517</span><br><span class="line">518</span><br><span class="line">519</span><br><span class="line">520</span><br><span class="line">521</span><br><span class="line">522</span><br><span class="line">523</span><br><span class="line">524</span><br><span class="line">525</span><br><span class="line">526</span><br><span class="line">527</span><br><span class="line">528</span><br><span class="line">529</span><br><span class="line">530</span><br><span class="line">531</span><br><span class="line">532</span><br><span class="line">533</span><br><span class="line">534</span><br><span class="line">535</span><br><span class="line">536</span><br><span class="line">537</span><br><span class="line">538</span><br><span class="line">539</span><br><span class="line">540</span><br><span class="line">541</span><br><span class="line">542</span><br><span class="line">543</span><br><span class="line">544</span><br><span class="line">545</span><br><span class="line">546</span><br><span class="line">547</span><br><span class="line">548</span><br><span class="line">549</span><br><span class="line">550</span><br><span class="line">551</span><br><span class="line">552</span><br><span class="line">553</span><br><span class="line">554</span><br><span class="line">555</span><br><span class="line">556</span><br><span class="line">557</span><br><span class="line">558</span><br><span class="line">559</span><br><span class="line">560</span><br><span class="line">561</span><br><span class="line">562</span><br><span class="line">563</span><br><span class="line">564</span><br><span class="line">565</span><br><span class="line">566</span><br><span class="line">567</span><br><span class="line">568</span><br><span class="line">569</span><br><span class="line">570</span><br><span class="line">571</span><br><span class="line">572</span><br><span class="line">573</span><br><span class="line">574</span><br><span class="line">575</span><br><span class="line">576</span><br><span class="line">577</span><br><span class="line">578</span><br><span class="line">579</span><br><span class="line">580</span><br><span class="line">581</span><br><span class="line">582</span><br><span class="line">583</span><br><span class="line">584</span><br><span class="line">585</span><br><span class="line">586</span><br><span class="line">587</span><br><span class="line">588</span><br><span class="line">589</span><br><span class="line">590</span><br><span class="line">591</span><br><span class="line">592</span><br><span class="line">593</span><br><span class="line">594</span><br><span class="line">595</span><br><span class="line">596</span><br><span class="line">597</span><br><span class="line">598</span><br><span class="line">599</span><br><span class="line">600</span><br><span class="line">601</span><br><span class="line">602</span><br><span class="line">603</span><br><span class="line">604</span><br><span class="line">605</span><br><span class="line">606</span><br><span class="line">607</span><br><span class="line">608</span><br><span class="line">609</span><br><span class="line">610</span><br><span class="line">611</span><br><span class="line">612</span><br><span class="line">613</span><br><span class="line">614</span><br><span class="line">615</span><br><span class="line">616</span><br><span class="line">617</span><br><span class="line">618</span><br><span class="line">619</span><br><span class="line">620</span><br><span class="line">621</span><br><span class="line">622</span><br><span class="line">623</span><br><span class="line">624</span><br><span class="line">625</span><br><span class="line">626</span><br><span class="line">627</span><br><span class="line">628</span><br><span class="line">629</span><br><span class="line">630</span><br><span class="line">631</span><br><span class="line">632</span><br><span class="line">633</span><br><span class="line">634</span><br><span class="line">635</span><br><span class="line">636</span><br><span class="line">637</span><br><span class="line">638</span><br><span class="line">639</span><br><span class="line">640</span><br><span class="line">641</span><br><span class="line">642</span><br><span class="line">643</span><br><span class="line">644</span><br><span class="line">645</span><br><span class="line">646</span><br><span class="line">647</span><br><span class="line">648</span><br><span class="line">649</span><br><span class="line">650</span><br><span class="line">651</span><br><span class="line">652</span><br><span class="line">653</span><br><span class="line">654</span><br><span class="line">655</span><br><span class="line">656</span><br><span class="line">657</span><br><span class="line">658</span><br><span class="line">659</span><br><span class="line">660</span><br><span class="line">661</span><br><span class="line">662</span><br><span class="line">663</span><br><span class="line">664</span><br><span class="line">665</span><br><span class="line">666</span><br><span class="line">667</span><br><span class="line">668</span><br><span class="line">669</span><br><span class="line">670</span><br><span class="line">671</span><br><span class="line">672</span><br><span class="line">673</span><br><span class="line">674</span><br><span class="line">675</span><br><span class="line">676</span><br><span class="line">677</span><br><span class="line">678</span><br><span class="line">679</span><br><span class="line">680</span><br><span class="line">681</span><br><span class="line">682</span><br><span class="line">683</span><br><span class="line">684</span><br><span class="line">685</span><br><span class="line">686</span><br><span class="line">687</span><br><span class="line">688</span><br><span class="line">689</span><br><span class="line">690</span><br><span class="line">691</span><br><span class="line">692</span><br><span class="line">693</span><br><span class="line">694</span><br><span class="line">695</span><br><span class="line">696</span><br><span class="line">697</span><br><span class="line">698</span><br><span class="line">699</span><br><span class="line">700</span><br><span class="line">701</span><br><span class="line">702</span><br><span class="line">703</span><br><span class="line">704</span><br><span class="line">705</span><br><span class="line">706</span><br><span class="line">707</span><br><span class="line">708</span><br><span class="line">709</span><br><span class="line">710</span><br><span class="line">711</span><br><span class="line">712</span><br><span class="line">713</span><br><span class="line">714</span><br><span class="line">715</span><br><span class="line">716</span><br><span class="line">717</span><br><span class="line">718</span><br><span class="line">719</span><br><span class="line">720</span><br><span class="line">721</span><br><span class="line">722</span><br><span class="line">723</span><br><span class="line">724</span><br><span class="line">725</span><br><span class="line">726</span><br><span class="line">727</span><br><span class="line">728</span><br><span class="line">729</span><br><span class="line">730</span><br><span class="line">731</span><br><span class="line">732</span><br><span class="line">733</span><br><span class="line">734</span><br><span class="line">735</span><br><span class="line">736</span><br><span class="line">737</span><br><span class="line">738</span><br><span class="line">739</span><br><span class="line">740</span><br><span class="line">741</span><br><span class="line">742</span><br><span class="line">743</span><br><span class="line">744</span><br><span class="line">745</span><br><span class="line">746</span><br><span class="line">747</span><br><span class="line">748</span><br><span class="line">749</span><br><span class="line">750</span><br><span class="line">751</span><br><span class="line">752</span><br><span class="line">753</span><br><span class="line">754</span><br><span class="line">755</span><br><span class="line">756</span><br><span class="line">757</span><br><span class="line">758</span><br><span class="line">759</span><br><span class="line">760</span><br><span class="line">761</span><br><span class="line">762</span><br><span class="line">763</span><br><span class="line">764</span><br><span class="line">765</span><br><span class="line">766</span><br><span class="line">767</span><br><span class="line">768</span><br><span class="line">769</span><br><span class="line">770</span><br><span class="line">771</span><br><span class="line">772</span><br><span class="line">773</span><br><span class="line">774</span><br><span class="line">775</span><br><span class="line">776</span><br><span class="line">777</span><br><span class="line">778</span><br><span class="line">779</span><br><span class="line">780</span><br><span class="line">781</span><br><span class="line">782</span><br><span class="line">783</span><br><span class="line">784</span><br><span class="line">785</span><br><span class="line">786</span><br><span class="line">787</span><br><span class="line">788</span><br><span class="line">789</span><br><span class="line">790</span><br><span class="line">791</span><br><span class="line">792</span><br><span class="line">793</span><br><span class="line">794</span><br><span class="line">795</span><br><span class="line">796</span><br><span class="line">797</span><br><span class="line">798</span><br><span class="line">799</span><br><span class="line">800</span><br><span class="line">801</span><br><span class="line">802</span><br><span class="line">803</span><br><span class="line">804</span><br><span class="line">805</span><br><span class="line">806</span><br><span class="line">807</span><br><span class="line">808</span><br><span class="line">809</span><br><span class="line">810</span><br><span class="line">811</span><br><span class="line">812</span><br><span class="line">813</span><br><span class="line">814</span><br><span class="line">815</span><br><span class="line">816</span><br><span class="line">817</span><br><span class="line">818</span><br><span class="line">819</span><br><span class="line">820</span><br><span class="line">821</span><br><span class="line">822</span><br><span class="line">823</span><br><span class="line">824</span><br><span class="line">825</span><br><span class="line">826</span><br><span class="line">827</span><br><span class="line">828</span><br><span class="line">829</span><br><span class="line">830</span><br><span class="line">831</span><br><span class="line">832</span><br><span class="line">833</span><br><span class="line">834</span><br><span class="line">835</span><br><span class="line">836</span><br><span class="line">837</span><br><span class="line">838</span><br><span class="line">839</span><br><span class="line">840</span><br><span class="line">841</span><br><span class="line">842</span><br><span class="line">843</span><br><span class="line">844</span><br><span class="line">845</span><br><span class="line">846</span><br><span class="line">847</span><br><span class="line">848</span><br><span class="line">849</span><br><span class="line">850</span><br><span class="line">851</span><br><span class="line">852</span><br><span class="line">853</span><br><span class="line">854</span><br><span class="line">855</span><br><span class="line">856</span><br><span class="line">857</span><br><span class="line">858</span><br><span class="line">859</span><br><span class="line">860</span><br><span class="line">861</span><br><span class="line">862</span><br><span class="line">863</span><br><span class="line">864</span><br><span class="line">865</span><br><span class="line">866</span><br><span class="line">867</span><br><span class="line">868</span><br><span class="line">869</span><br><span class="line">870</span><br><span class="line">871</span><br><span class="line">872</span><br><span class="line">873</span><br><span class="line">874</span><br><span class="line">875</span><br><span class="line">876</span><br><span class="line">877</span><br><span class="line">878</span><br><span class="line">879</span><br><span class="line">880</span><br><span class="line">881</span><br><span class="line">882</span><br><span class="line">883</span><br><span class="line">884</span><br><span class="line">885</span><br><span class="line">886</span><br><span class="line">887</span><br><span class="line">888</span><br><span class="line">889</span><br><span class="line">890</span><br><span class="line">891</span><br><span class="line">892</span><br><span class="line">893</span><br><span class="line">894</span><br><span class="line">895</span><br><span class="line">896</span><br><span class="line">897</span><br><span class="line">898</span><br><span class="line">899</span><br><span class="line">900</span><br><span class="line">901</span><br><span class="line">902</span><br><span class="line">903</span><br><span class="line">904</span><br><span class="line">905</span><br><span class="line">906</span><br><span class="line">907</span><br><span class="line">908</span><br><span class="line">909</span><br><span class="line">910</span><br><span class="line">911</span><br><span class="line">912</span><br><span class="line">913</span><br><span class="line">914</span><br><span class="line">915</span><br><span class="line">916</span><br><span class="line">917</span><br><span class="line">918</span><br><span class="line">919</span><br><span class="line">920</span><br><span class="line">921</span><br><span class="line">922</span><br><span class="line">923</span><br><span class="line">924</span><br><span class="line">925</span><br><span class="line">926</span><br><span class="line">927</span><br><span class="line">928</span><br><span class="line">929</span><br><span class="line">930</span><br><span class="line">931</span><br><span class="line">932</span><br><span class="line">933</span><br><span class="line">934</span><br><span class="line">935</span><br><span class="line">936</span><br><span class="line">937</span><br><span class="line">938</span><br><span class="line">939</span><br><span class="line">940</span><br><span class="line">941</span><br><span class="line">942</span><br><span class="line">943</span><br><span class="line">944</span><br><span class="line">945</span><br><span class="line">946</span><br><span class="line">947</span><br><span class="line">948</span><br><span class="line">949</span><br><span class="line">950</span><br><span class="line">951</span><br><span class="line">952</span><br><span class="line">953</span><br><span class="line">954</span><br><span class="line">955</span><br><span class="line">956</span><br><span class="line">957</span><br><span class="line">958</span><br><span class="line">959</span><br><span class="line">960</span><br><span class="line">961</span><br><span class="line">962</span><br><span class="line">963</span><br><span class="line">964</span><br><span class="line">965</span><br><span class="line">966</span><br><span class="line">967</span><br><span class="line">968</span><br><span class="line">969</span><br><span class="line">970</span><br><span class="line">971</span><br><span class="line">972</span><br><span class="line">973</span><br><span class="line">974</span><br><span class="line">975</span><br><span class="line">976</span><br><span class="line">977</span><br><span class="line">978</span><br><span class="line">979</span><br><span class="line">980</span><br><span class="line">981</span><br><span class="line">982</span><br><span class="line">983</span><br><span class="line">984</span><br><span class="line">985</span><br><span class="line">986</span><br><span class="line">987</span><br><span class="line">988</span><br><span class="line">989</span><br><span class="line">990</span><br><span class="line">991</span><br><span class="line">992</span><br><span class="line">993</span><br><span class="line">994</span><br><span class="line">995</span><br><span class="line">996</span><br><span class="line">997</span><br><span class="line">998</span><br><span class="line">999</span><br><span class="line">1000</span><br><span class="line">1001</span><br><span class="line">1002</span><br><span class="line">1003</span><br><span class="line">1004</span><br><span class="line">1005</span><br><span class="line">1006</span><br><span class="line">1007</span><br><span class="line">1008</span><br><span class="line">1009</span><br><span class="line">1010</span><br><span class="line">1011</span><br><span class="line">1012</span><br><span class="line">1013</span><br><span class="line">1014</span><br><span class="line">1015</span><br><span class="line">1016</span><br><span class="line">1017</span><br><span class="line">1018</span><br><span class="line">1019</span><br><span class="line">1020</span><br><span class="line">1021</span><br><span class="line">1022</span><br><span class="line">1023</span><br><span class="line">1024</span><br><span class="line">1025</span><br><span class="line">1026</span><br><span class="line">1027</span><br><span class="line">1028</span><br><span class="line">1029</span><br><span class="line">1030</span><br><span class="line">1031</span><br><span class="line">1032</span><br><span class="line">1033</span><br><span class="line">1034</span><br><span class="line">1035</span><br><span class="line">1036</span><br><span class="line">1037</span><br><span class="line">1038</span><br><span class="line">1039</span><br><span class="line">1040</span><br><span class="line">1041</span><br><span class="line">1042</span><br><span class="line">1043</span><br><span class="line">1044</span><br><span class="line">1045</span><br><span class="line">1046</span><br><span class="line">1047</span><br><span class="line">1048</span><br><span class="line">1049</span><br><span class="line">1050</span><br><span class="line">1051</span><br><span class="line">1052</span><br><span class="line">1053</span><br><span class="line">1054</span><br><span class="line">1055</span><br><span class="line">1056</span><br><span class="line">1057</span><br><span class="line">1058</span><br><span class="line">1059</span><br><span class="line">1060</span><br><span class="line">1061</span><br><span class="line">1062</span><br><span class="line">1063</span><br><span class="line">1064</span><br><span class="line">1065</span><br><span class="line">1066</span><br><span class="line">1067</span><br><span class="line">1068</span><br><span class="line">1069</span><br><span class="line">1070</span><br><span class="line">1071</span><br><span class="line">1072</span><br><span class="line">1073</span><br><span class="line">1074</span><br><span class="line">1075</span><br><span class="line">1076</span><br><span class="line">1077</span><br><span class="line">1078</span><br><span class="line">1079</span><br><span class="line">1080</span><br><span class="line">1081</span><br><span class="line">1082</span><br><span class="line">1083</span><br><span class="line">1084</span><br><span class="line">1085</span><br><span class="line">1086</span><br><span class="line">1087</span><br><span class="line">1088</span><br><span class="line">1089</span><br><span class="line">1090</span><br><span class="line">1091</span><br><span class="line">1092</span><br><span class="line">1093</span><br><span class="line">1094</span><br><span class="line">1095</span><br><span class="line">1096</span><br><span class="line">1097</span><br><span class="line">1098</span><br><span class="line">1099</span><br><span class="line">1100</span><br><span class="line">1101</span><br><span class="line">1102</span><br><span class="line">1103</span><br><span class="line">1104</span><br><span class="line">1105</span><br><span class="line">1106</span><br><span class="line">1107</span><br><span class="line">1108</span><br><span class="line">1109</span><br><span class="line">1110</span><br><span class="line">1111</span><br><span class="line">1112</span><br><span class="line">1113</span><br><span class="line">1114</span><br><span class="line">1115</span><br><span class="line">1116</span><br><span class="line">1117</span><br><span class="line">1118</span><br><span class="line">1119</span><br><span class="line">1120</span><br><span class="line">1121</span><br><span class="line">1122</span><br><span class="line">1123</span><br><span class="line">1124</span><br><span class="line">1125</span><br><span class="line">1126</span><br><span class="line">1127</span><br><span class="line">1128</span><br><span class="line">1129</span><br><span class="line">1130</span><br><span class="line">1131</span><br><span class="line">1132</span><br><span class="line">1133</span><br><span class="line">1134</span><br><span class="line">1135</span><br><span class="line">1136</span><br><span class="line">1137</span><br><span class="line">1138</span><br><span class="line">1139</span><br><span class="line">1140</span><br><span class="line">1141</span><br><span class="line">1142</span><br><span class="line">1143</span><br><span class="line">1144</span><br><span class="line">1145</span><br><span class="line">1146</span><br><span class="line">1147</span><br><span class="line">1148</span><br><span class="line">1149</span><br><span class="line">1150</span><br><span class="line">1151</span><br><span class="line">1152</span><br><span class="line">1153</span><br><span class="line">1154</span><br><span class="line">1155</span><br><span class="line">1156</span><br><span class="line">1157</span><br><span class="line">1158</span><br><span class="line">1159</span><br><span class="line">1160</span><br><span class="line">1161</span><br><span class="line">1162</span><br><span class="line">1163</span><br><span class="line">1164</span><br><span class="line">1165</span><br><span class="line">1166</span><br><span class="line">1167</span><br><span class="line">1168</span><br><span class="line">1169</span><br><span class="line">1170</span><br><span class="line">1171</span><br><span class="line">1172</span><br><span class="line">1173</span><br><span class="line">1174</span><br><span class="line">1175</span><br><span class="line">1176</span><br><span class="line">1177</span><br><span class="line">1178</span><br><span class="line">1179</span><br><span class="line">1180</span><br><span class="line">1181</span><br><span class="line">1182</span><br><span class="line">1183</span><br><span class="line">1184</span><br><span class="line">1185</span><br><span class="line">1186</span><br><span class="line">1187</span><br><span class="line">1188</span><br><span class="line">1189</span><br><span class="line">1190</span><br><span class="line">1191</span><br><span class="line">1192</span><br><span class="line">1193</span><br><span class="line">1194</span><br><span class="line">1195</span><br><span class="line">1196</span><br><span class="line">1197</span><br><span class="line">1198</span><br><span class="line">1199</span><br><span class="line">1200</span><br><span class="line">1201</span><br><span class="line">1202</span><br><span class="line">1203</span><br><span class="line">1204</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 導航設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">nav:</span></span><br><span class="line">  <span class="comment"># 導航欄 Logo 圖片</span></span><br><span class="line">  <span class="attr">logo:</span></span><br><span class="line">  <span class="comment"># 是否顯示標題</span></span><br><span class="line">  <span class="attr">display_title:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 是否固定導航欄</span></span><br><span class="line">  <span class="attr">fixed:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="attr">menu:</span></span><br><span class="line">  <span class="comment"># 首頁: / || fas fa-home</span></span><br><span class="line">  <span class="comment"># 列表||fas fa-list:</span></span><br><span class="line">  <span class="comment">#   音樂: /music/ || fas fa-music</span></span><br><span class="line">  <span class="comment">#   電影: /movies/ || fas fa-video</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 代碼塊設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">code_blocks:</span></span><br><span class="line">  <span class="comment"># 代碼塊主題: darker / pale night / light / ocean / false</span></span><br><span class="line">  <span class="attr">theme:</span> <span class="string">light</span></span><br><span class="line">  <span class="comment"># 是否使用 Mac 風格</span></span><br><span class="line">  <span class="attr">macStyle:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 代碼塊高度限制（單位: px）</span></span><br><span class="line">  <span class="attr">height_limit:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否自動換行</span></span><br><span class="line">  <span class="attr">word_wrap:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># 工具欄</span></span><br><span class="line">  <span class="comment"># 是否顯示複製按鈕</span></span><br><span class="line">  <span class="attr">copy:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 是否顯示語言標籤</span></span><br><span class="line">  <span class="attr">language:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># true: 收縮代碼塊 | false: 展開代碼塊 | none: 展開代碼塊並隱藏按鈕</span></span><br><span class="line">  <span class="attr">shrink:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否顯示全屏顯示代碼塊按鈕</span></span><br><span class="line">  <span class="attr">fullpage:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 社交媒體鏈接</span></span><br><span class="line"><span class="comment"># 格式:</span></span><br><span class="line"><span class="comment">#   icon: 鏈接 || 描述 || 顏色</span></span><br><span class="line"><span class="attr">social:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 圖片設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 網站的 favicon 圖標</span></span><br><span class="line"><span class="attr">favicon:</span> <span class="string">/img/favicon.png</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 頭像設置</span></span><br><span class="line"><span class="attr">avatar:</span></span><br><span class="line">  <span class="comment"># 頭像圖片鏈接</span></span><br><span class="line">  <span class="attr">img:</span> <span class="string">https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png</span></span><br><span class="line">  <span class="comment"># 是否啟用頭像效果</span></span><br><span class="line">  <span class="attr">effect:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 禁用所有橫幅圖片</span></span><br><span class="line"><span class="attr">disable_top_img:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 如果頁面未設置橫幅，則顯示默認的橫幅圖片</span></span><br><span class="line"><span class="attr">default_top_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 主頁的橫幅圖片</span></span><br><span class="line"><span class="attr">index_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 歸檔頁的橫幅圖片</span></span><br><span class="line"><span class="attr">archive_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 注意: 是標籤頁（單個標籤），不是標籤頁面（所有標籤）</span></span><br><span class="line"><span class="attr">tag_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 標籤頁的橫幅圖片，可以為每個標籤設置橫幅圖片</span></span><br><span class="line"><span class="comment"># 格式:</span></span><br><span class="line"><span class="comment">#  - 標籤名: 圖片鏈接</span></span><br><span class="line"><span class="attr">tag_per_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 注意: 是分類頁（單個分類），不是分類頁面（所有分類）</span></span><br><span class="line"><span class="attr">category_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 分類頁的橫幅圖片，可以為每個分類設置橫幅圖片</span></span><br><span class="line"><span class="comment"># 格式:</span></span><br><span class="line"><span class="comment">#  - 分類名: 圖片鏈接</span></span><br><span class="line"><span class="attr">category_per_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 頁腳的背景圖片</span></span><br><span class="line"><span class="attr">footer_img:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 網站背景</span></span><br><span class="line"><span class="comment"># 可以設置為顏色或圖片</span></span><br><span class="line"><span class="comment"># 圖片格式: url(http://xxxxxx.com/xxx.jpg)</span></span><br><span class="line"><span class="attr">background:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 封面設置</span></span><br><span class="line"><span class="attr">cover:</span></span><br><span class="line">  <span class="comment"># 是否禁用封面</span></span><br><span class="line">  <span class="attr">index_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">aside_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">archives_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 主頁封面的位置</span></span><br><span class="line">  <span class="comment"># 選擇: left/right/both</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">both</span></span><br><span class="line">  <span class="comment"># 當未設置封面時，顯示默認封面</span></span><br><span class="line">  <span class="attr">default_cover:</span></span><br><span class="line">    <span class="comment"># - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 替換損壞的圖片</span></span><br><span class="line"><span class="attr">error_img:</span></span><br><span class="line">  <span class="comment"># 友鏈頁面的錯誤圖片</span></span><br><span class="line">  <span class="attr">flink:</span> <span class="string">/img/friend_404.gif</span></span><br><span class="line">  <span class="comment"># 文章頁面的錯誤圖片</span></span><br><span class="line">  <span class="attr">post_page:</span> <span class="string">/img/404.jpg</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 簡單的 404 頁面</span></span><br><span class="line"><span class="attr">error_404:</span></span><br><span class="line">  <span class="comment"># 是否啟用 404 頁面</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 404 頁面的副標題</span></span><br><span class="line">  <span class="attr">subtitle:</span> <span class="string">&#x27;Page Not Found&#x27;</span></span><br><span class="line">  <span class="comment"># 404 頁面的卡片背景圖片</span></span><br><span class="line">  <span class="attr">background:</span> <span class="string">https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 文章元數據設置</span></span><br><span class="line"><span class="attr">post_meta:</span></span><br><span class="line">  <span class="comment"># 主頁頁面</span></span><br><span class="line">  <span class="attr">page:</span></span><br><span class="line">    <span class="comment"># 日期類型: created / updated / both</span></span><br><span class="line">    <span class="attr">date_type:</span> <span class="string">created</span></span><br><span class="line">    <span class="comment"># 日期格式: date / relative</span></span><br><span class="line">    <span class="attr">date_format:</span> <span class="string">date</span></span><br><span class="line">    <span class="comment"># 是否顯示分類</span></span><br><span class="line">    <span class="attr">categories:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 是否顯示標籤</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># 是否顯示文字標籤</span></span><br><span class="line">    <span class="attr">label:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 文章頁面</span></span><br><span class="line">  <span class="attr">post:</span></span><br><span class="line">    <span class="comment"># 元數據位置: left / center</span></span><br><span class="line">    <span class="attr">position:</span> <span class="string">left</span></span><br><span class="line">    <span class="comment"># 日期類型: created / updated / both</span></span><br><span class="line">    <span class="attr">date_type:</span> <span class="string">both</span></span><br><span class="line">    <span class="comment"># 日期格式: date / relative</span></span><br><span class="line">    <span class="attr">date_format:</span> <span class="string">date</span></span><br><span class="line">    <span class="comment"># 是否顯示分類</span></span><br><span class="line">    <span class="attr">categories:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 是否顯示標籤</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 是否顯示文字標籤</span></span><br><span class="line">    <span class="attr">label:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 首頁設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 首頁頭圖的設置</span></span><br><span class="line"><span class="comment"># 默認: 頭圖全屏，站點信息在中間</span></span><br><span class="line"><span class="comment"># 站點信息的位置，例如: 300px/300em/300rem/10%</span></span><br><span class="line"><span class="attr">index_site_info_top:</span></span><br><span class="line"><span class="comment"># 頭圖的高度，例如: 300px/300em/300rem</span></span><br><span class="line"><span class="attr">index_top_img_height:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 首頁的副標題設置</span></span><br><span class="line"><span class="attr">subtitle:</span></span><br><span class="line">  <span class="comment"># 是否啟用副標題</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否啟用打字機效果</span></span><br><span class="line">  <span class="attr">effect:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 自定義 typed.js</span></span><br><span class="line">  <span class="comment"># https://github.com/mattboldt/typed.js/#customization</span></span><br><span class="line">  <span class="attr">typed_option:</span></span><br><span class="line">  <span class="comment"># 來源 - 調用第三方服務 API（僅限中文）</span></span><br><span class="line">  <span class="comment"># 它將首先顯示來源，然後顯示副標題內容</span></span><br><span class="line">  <span class="comment"># 選擇: false/1/2/3</span></span><br><span class="line">  <span class="comment"># false - 禁用此功能</span></span><br><span class="line">  <span class="comment"># 1 - hitokoto.cn</span></span><br><span class="line">  <span class="comment"># 2 - yijuzhan.com</span></span><br><span class="line">  <span class="comment"># 3 - jinrishici.com</span></span><br><span class="line">  <span class="attr">source:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 如果關閉打字機效果，副標題將僅顯示 sub 的第一行內容</span></span><br><span class="line">  <span class="attr">sub:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 首頁文章佈局</span></span><br><span class="line"><span class="comment"># 1: 行佈局</span></span><br><span class="line"><span class="comment"># 2: 列布局</span></span><br><span class="line"><span class="attr">index_layout:</span> <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 在首頁顯示文章簡介</span></span><br><span class="line"><span class="comment"># 1: 描述</span></span><br><span class="line"><span class="comment"># 2: 兩者（如果存在描述，將顯示描述，否則顯示自動摘要）</span></span><br><span class="line"><span class="comment"># 3: 自動摘要（默認）</span></span><br><span class="line"><span class="comment"># false: 不顯示文章簡介</span></span><br><span class="line"><span class="attr">index_post_content:</span></span><br><span class="line">  <span class="attr">method:</span> <span class="number">3</span></span><br><span class="line">  <span class="comment"># 如果設置 method 為 2 或 3，需要配置長度</span></span><br><span class="line">  <span class="attr">length:</span> <span class="number">500</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 文章設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">toc:</span></span><br><span class="line">  <span class="comment"># 是否在文章中顯示目錄</span></span><br><span class="line">  <span class="attr">post:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 是否在頁面中顯示目錄</span></span><br><span class="line">  <span class="attr">page:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否顯示目錄編號</span></span><br><span class="line">  <span class="attr">number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 是否默認展開目錄</span></span><br><span class="line">  <span class="attr">expand:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否使用簡潔風格（僅適用於文章）</span></span><br><span class="line">  <span class="attr">style_simple:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否顯示滾動百分比</span></span><br><span class="line">  <span class="attr">scroll_percent:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="attr">post_copyright:</span></span><br><span class="line">  <span class="comment"># 是否啟用版權聲明</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 是否進行文章 URL 解碼</span></span><br><span class="line">  <span class="attr">decode:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 作者鏈接</span></span><br><span class="line">  <span class="attr">author_href:</span></span><br><span class="line">  <span class="comment"># 許可證類型</span></span><br><span class="line">  <span class="attr">license:</span> <span class="string">CC</span> <span class="string">BY-NC-SA</span> <span class="number">4.0</span></span><br><span class="line">  <span class="comment"># 許可證鏈接</span></span><br><span class="line">  <span class="attr">license_url:</span> <span class="string">https://creativecommons.org/licenses/by-nc-sa/4.0/</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 贊助/打賞</span></span><br><span class="line"><span class="attr">reward:</span></span><br><span class="line">  <span class="comment"># 是否啟用打賞</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 打賞案例文本</span></span><br><span class="line">  <span class="attr">text:</span></span><br><span class="line">  <span class="attr">QR_code:</span></span><br><span class="line">    <span class="comment"># - img: /img/wechat.jpg</span></span><br><span class="line">    <span class="comment">#   link:</span></span><br><span class="line">    <span class="comment">#   text: 微信</span></span><br><span class="line">    <span class="comment"># - img: /img/alipay.jpg</span></span><br><span class="line">    <span class="comment">#   link:</span></span><br><span class="line">    <span class="comment">#   text: 支付寶</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 文章編輯</span></span><br><span class="line"><span class="comment"># 輕鬆在線瀏覽和編輯博客源代碼</span></span><br><span class="line"><span class="attr">post_edit:</span></span><br><span class="line">  <span class="comment"># 是否啟用在線編輯</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># url: https://github.com/用户名/倉庫名/edit/分支名/子目錄名/</span></span><br><span class="line">  <span class="comment"># 例如: https://github.com/jerryc127/butterfly.js.org/edit/main/source/</span></span><br><span class="line">  <span class="attr">url:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 相關文章</span></span><br><span class="line"><span class="attr">related_post:</span></span><br><span class="line">  <span class="comment"># 是否顯示相關文章</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 顯示的文章數量</span></span><br><span class="line">  <span class="attr">limit:</span> <span class="number">6</span></span><br><span class="line">  <span class="comment"># 選擇: created / updated</span></span><br><span class="line">  <span class="attr">date_type:</span> <span class="string">created</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 選擇: 1 / 2 / false</span></span><br><span class="line"><span class="comment"># 1: “下一篇文章”將鏈接到舊文章</span></span><br><span class="line"><span class="comment"># 2: “下一篇文章”將鏈接到新文章</span></span><br><span class="line"><span class="comment"># false: 禁用分頁</span></span><br><span class="line"><span class="attr">post_pagination:</span> <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 顯示文章過期通知</span></span><br><span class="line"><span class="attr">noticeOutdate:</span></span><br><span class="line">  <span class="comment"># 是否啟用過期通知</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 樣式: simple / flat</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">flat</span></span><br><span class="line">  <span class="comment"># 多少天后顯示通知</span></span><br><span class="line">  <span class="attr">limit_day:</span> <span class="number">365</span></span><br><span class="line">  <span class="comment"># 位置: top / bottom</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">top</span></span><br><span class="line">  <span class="attr">message_prev:</span> <span class="string">已經過了</span></span><br><span class="line">  <span class="attr">message_next:</span> <span class="string">天自上次更新，文章內容可能已過時。</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 頁腳設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="attr">footer:</span></span><br><span class="line">  <span class="attr">owner:</span></span><br><span class="line">    <span class="comment"># 是否啟用所有者顯示</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 網站創建年份</span></span><br><span class="line">    <span class="attr">since:</span> <span class="number">2019</span></span><br><span class="line">  <span class="comment"># 自定義文本</span></span><br><span class="line">  <span class="attr">custom_text:</span></span><br><span class="line">  <span class="comment"># 主題和框架的版權聲明</span></span><br><span class="line">  <span class="attr">copyright:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 側邊欄設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">aside:</span></span><br><span class="line">  <span class="comment"># 是否啟用側邊欄</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 是否默認隱藏側邊欄</span></span><br><span class="line">  <span class="attr">hide:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否在右下角顯示隱藏側邊欄的按鈕</span></span><br><span class="line">  <span class="attr">button:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 移動設備上是否啟用側邊欄</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 側邊欄位置：left / right</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">right</span></span><br><span class="line">  <span class="attr">display:</span></span><br><span class="line">    <span class="comment"># 歸檔頁面是否顯示側邊欄</span></span><br><span class="line">    <span class="attr">archive:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 標籤頁面是否顯示側邊欄</span></span><br><span class="line">    <span class="attr">tag:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 分類頁面是否顯示側邊欄</span></span><br><span class="line">    <span class="attr">category:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">card_author:</span></span><br><span class="line">    <span class="comment"># 是否顯示作者信息卡片</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 作者描述</span></span><br><span class="line">    <span class="attr">description:</span></span><br><span class="line">    <span class="attr">button:</span></span><br><span class="line">      <span class="comment"># 是否顯示按鈕</span></span><br><span class="line">      <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">      <span class="comment"># 按鈕圖標</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-github</span></span><br><span class="line">      <span class="comment"># 按鈕文本</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">Follow</span> <span class="string">Me</span></span><br><span class="line">      <span class="comment"># 按鈕鏈接</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://github.com/xxxxxx</span></span><br><span class="line">  <span class="attr">card_announcement:</span></span><br><span class="line">    <span class="comment"># 是否顯示公告卡片</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 公告內容</span></span><br><span class="line">    <span class="attr">content:</span> <span class="string">This</span> <span class="string">is</span> <span class="string">my</span> <span class="string">Blog</span></span><br><span class="line">  <span class="attr">card_recent_post:</span></span><br><span class="line">    <span class="comment"># 是否顯示最近文章卡片</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 顯示文章數量，0 表示顯示所有</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">5</span></span><br><span class="line">    <span class="comment"># 排序方式：date / updated</span></span><br><span class="line">    <span class="attr">sort:</span> <span class="string">date</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_newest_comments:</span></span><br><span class="line">    <span class="comment"># 是否顯示最新評論卡片</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">    <span class="comment"># 顯示評論數量</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">6</span></span><br><span class="line">    <span class="comment"># 單位：分鐘，保存數據到 localStorage</span></span><br><span class="line">    <span class="attr">storage:</span> <span class="number">10</span></span><br><span class="line">    <span class="comment"># 是否顯示頭像</span></span><br><span class="line">    <span class="attr">avatar:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">card_categories:</span></span><br><span class="line">    <span class="comment"># 是否顯示分類卡片</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 顯示分類數量，0 表示顯示所有</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">8</span></span><br><span class="line">    <span class="comment"># 選擇：none / true / false</span></span><br><span class="line">    <span class="attr">expand:</span> <span class="string">none</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_tags:</span></span><br><span class="line">    <span class="comment"># 是否顯示標籤卡片</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 顯示標籤數量，0 表示顯示所有</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">40</span></span><br><span class="line">    <span class="comment"># 是否啟用顏色</span></span><br><span class="line">    <span class="attr">color:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># 標籤排序方式：random/name/length</span></span><br><span class="line">    <span class="attr">orderby:</span> <span class="string">random</span></span><br><span class="line">    <span class="comment"># 排序順序：1 表示升序，-1 表示降序</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">1</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_archives:</span></span><br><span class="line">    <span class="comment"># 是否顯示歸檔卡片</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 歸檔類型：monthly / yearly</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">monthly</span></span><br><span class="line">    <span class="comment"># 日期格式，例如：YYYY年MM月</span></span><br><span class="line">    <span class="attr">format:</span> <span class="string">MMMM</span> <span class="string">YYYY</span></span><br><span class="line">    <span class="comment"># 排序順序：1 表示升序，-1 表示降序</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line">    <span class="comment"># 顯示歸檔數量，0 表示顯示所有</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">8</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_post_series:</span></span><br><span class="line">    <span class="comment"># 是否顯示系列文章卡片</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 標題顯示系列名稱</span></span><br><span class="line">    <span class="attr">series_title:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># 排序方式：title 或 date</span></span><br><span class="line">    <span class="attr">orderBy:</span> <span class="string">&#x27;date&#x27;</span></span><br><span class="line">    <span class="comment"># 排序順序：1 表示升序，-1 表示降序</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line">  <span class="attr">card_webinfo:</span></span><br><span class="line">    <span class="comment"># 是否顯示網站信息卡片</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 是否顯示文章數量</span></span><br><span class="line">    <span class="attr">post_count:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 是否顯示最後推送日期</span></span><br><span class="line">    <span class="attr">last_push_date:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">    <span class="comment"># 發佈日期與當前日期的時間差</span></span><br><span class="line">    <span class="comment"># 格式：Month/Day/Year Time 或 Year/Month/Day Time</span></span><br><span class="line">    <span class="comment"># 如果不啟用此功能，請留空</span></span><br><span class="line">    <span class="attr">runtime_date:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 右下角按鈕設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 右下角按鈕與底部的距離（默認單位：px）</span></span><br><span class="line"><span class="attr">rightside_bottom:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 簡繁轉換設置</span></span><br><span class="line"><span class="attr">translate:</span></span><br><span class="line">  <span class="comment"># 是否啟用簡繁轉換</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 按鈕文本</span></span><br><span class="line">  <span class="attr">default:</span> <span class="string">繁</span></span><br><span class="line">  <span class="comment"># 網站語言（1 - 繁體中文 / 2 - 簡體中文）</span></span><br><span class="line">  <span class="attr">defaultEncoding:</span> <span class="number">2</span></span><br><span class="line">  <span class="comment"># 轉換延遲</span></span><br><span class="line">  <span class="attr">translateDelay:</span> <span class="number">0</span></span><br><span class="line">  <span class="comment"># 按鈕在簡體中文時的文本</span></span><br><span class="line">  <span class="attr">msgToTraditionalChinese:</span> <span class="string">&#x27;繁&#x27;</span></span><br><span class="line">  <span class="comment"># 按鈕在繁體中文時的文本</span></span><br><span class="line">  <span class="attr">msgToSimplifiedChinese:</span> <span class="string">&#x27;簡&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 閲讀模式</span></span><br><span class="line"><span class="attr">readmode:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 暗黑模式設置</span></span><br><span class="line"><span class="attr">darkmode:</span></span><br><span class="line">  <span class="comment"># 是否啟用暗黑模式</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 切換暗黑/明亮模式的按鈕</span></span><br><span class="line">  <span class="attr">button:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 是否自動切換暗黑/明亮模式</span></span><br><span class="line">  <span class="comment"># autoChangeMode: 1  跟隨系統設置，如果系統不支持暗黑模式，則在晚上 6 點到早上 6 點之間切換暗黑模式</span></span><br><span class="line">  <span class="comment"># autoChangeMode: 2  在晚上 6 點到早上 6 點之間切換暗黑模式</span></span><br><span class="line">  <span class="comment"># autoChangeMode: false  不自動切換</span></span><br><span class="line">  <span class="attr">autoChangeMode:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 設置明亮模式時間，值在 0 到 24 之間。如果未設置，默認值為 6 和 18</span></span><br><span class="line">  <span class="attr">start:</span></span><br><span class="line">  <span class="attr">end:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 在返回頂部按鈕中顯示滾動百分比</span></span><br><span class="line"><span class="attr">rightside_scroll_percent:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 不要修改以下設置，除非你知道它們的工作原理</span></span><br><span class="line"><span class="comment"># 選擇：readmode,translate,darkmode,hideAside,toc,chat,comment</span></span><br><span class="line"><span class="comment"># 不要重複相同的值</span></span><br><span class="line"><span class="attr">rightside_item_order:</span></span><br><span class="line">  <span class="comment"># 是否啟用右側項目順序</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 隱藏的默認項目：readmode,translate,darkmode,hideAside</span></span><br><span class="line">  <span class="attr">hide:</span></span><br><span class="line">  <span class="comment"># 顯示的默認項目：toc,chat,comment</span></span><br><span class="line">  <span class="attr">show:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 全局設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 錨點設置</span></span><br><span class="line"><span class="attr">anchor:</span></span><br><span class="line">  <span class="comment"># 滾動時，URL 將根據標題 ID 更新</span></span><br><span class="line">  <span class="attr">auto_update:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 點擊標題滾動並更新錨點</span></span><br><span class="line">  <span class="attr">click_to_scroll:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 圖片標題</span></span><br><span class="line"><span class="attr">photofigcaption:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 複製設置</span></span><br><span class="line"><span class="attr">copy:</span></span><br><span class="line">  <span class="comment"># 是否啟用複製功能</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 在複製的內容後添加版權信息</span></span><br><span class="line">  <span class="attr">copyright:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># 當複製字符數超過 limit_count 時添加版權信息</span></span><br><span class="line">    <span class="attr">limit_count:</span> <span class="number">150</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 需要安裝 hexo-wordcount 插件</span></span><br><span class="line"><span class="attr">wordcount:</span></span><br><span class="line">  <span class="comment"># 是否啟用字數統計</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 在文章元信息中顯示字數統計</span></span><br><span class="line">  <span class="attr">post_wordcount:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 在文章元信息中顯示閲讀時間</span></span><br><span class="line">  <span class="attr">min2read:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 在側邊欄網站信息中顯示總字數</span></span><br><span class="line">  <span class="attr">total_wordcount:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 不蒜子 PV / UV 統計</span></span><br><span class="line"><span class="attr">busuanzi:</span></span><br><span class="line">  <span class="comment"># 網站 UV 統計</span></span><br><span class="line">  <span class="attr">site_uv:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 網站 PV 統計</span></span><br><span class="line">  <span class="attr">site_pv:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 頁面 PV 統計</span></span><br><span class="line">  <span class="attr">page_pv:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 數學公式設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 關於 per_page</span></span><br><span class="line"><span class="comment"># 如果設置為 true，將在每個頁面加載 mathjax/katex 腳本</span></span><br><span class="line"><span class="comment"># 如果設置為 false，將根據你的設置加載 mathjax/katex 腳本（在頁面的 front-matter 中添加 &#x27;mathjax: true&#x27; 或者 &#x27;katex: true&#x27;）</span></span><br><span class="line"><span class="attr">math:</span></span><br><span class="line">  <span class="comment"># 選擇：mathjax, katex</span></span><br><span class="line">  <span class="comment"># 如果不需要數學公式，保持為空</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hide_scrollbar:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">  <span class="attr">mathjax:</span></span><br><span class="line">    <span class="comment"># 啟用上下文菜單</span></span><br><span class="line">    <span class="attr">enableMenu:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 選擇：all / ams / none，這控制是否對公式編號以及如何編號</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="string">none</span></span><br><span class="line"></span><br><span class="line">  <span class="attr">katex:</span></span><br><span class="line">    <span class="comment"># 啟用複製 KaTeX 公式</span></span><br><span class="line">    <span class="attr">copy_tex:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 搜索設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">search:</span></span><br><span class="line">  <span class="comment"># 選擇：algolia_search / local_search / docsearch</span></span><br><span class="line">  <span class="comment"># 如果不需要搜索功能，保持為空</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="attr">placeholder:</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Algolia 搜索</span></span><br><span class="line">  <span class="attr">algolia_search:</span></span><br><span class="line">    <span class="comment"># 每頁搜索結果數量</span></span><br><span class="line">    <span class="attr">hitsPerPage:</span> <span class="number">6</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># 本地搜索</span></span><br><span class="line">  <span class="attr">local_search:</span></span><br><span class="line">    <span class="comment"># 頁面加載時預加載搜索數據</span></span><br><span class="line">    <span class="attr">preload:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># 每篇文章顯示的頂部 n 個搜索結果，設置為 -1 顯示所有結果</span></span><br><span class="line">    <span class="attr">top_n_per_article:</span> <span class="number">1</span></span><br><span class="line">    <span class="comment"># 將 HTML 字符串反轉義為可讀內容</span></span><br><span class="line">    <span class="attr">unescape:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">CDN:</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Docsearch</span></span><br><span class="line">  <span class="comment"># https://docsearch.algolia.com/</span></span><br><span class="line">  <span class="attr">docsearch:</span></span><br><span class="line">    <span class="attr">appId:</span></span><br><span class="line">    <span class="attr">apiKey:</span></span><br><span class="line">    <span class="attr">indexName:</span></span><br><span class="line">    <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 分享系統</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">share:</span></span><br><span class="line">  <span class="comment"># 選擇：sharejs / addtoany</span></span><br><span class="line">  <span class="comment"># 如果不需要分享功能，保持為空</span></span><br><span class="line">  <span class="attr">use:</span> <span class="string">sharejs</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Share.js</span></span><br><span class="line">  <span class="comment"># https://github.com/overtrue/share.js</span></span><br><span class="line">  <span class="attr">sharejs:</span></span><br><span class="line">    <span class="attr">sites:</span> <span class="string">facebook,twitter,wechat,weibo,qq</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># AddToAny</span></span><br><span class="line">  <span class="comment"># https://www.addtoany.com/</span></span><br><span class="line">  <span class="attr">addtoany:</span></span><br><span class="line">    <span class="attr">item:</span> <span class="string">facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 評論系統</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">comments:</span></span><br><span class="line">  <span class="comment"># 最多兩個評論系統，第一個將作為默認顯示</span></span><br><span class="line">  <span class="comment"># 如果不需要評論功能，保持為空</span></span><br><span class="line">  <span class="comment"># 選擇：Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk</span></span><br><span class="line">  <span class="comment"># 兩個評論系統的格式：Disqus,Waline</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="comment"># 按鈕旁邊顯示評論系統名稱</span></span><br><span class="line">  <span class="attr">text:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 懶加載：評論系統將在評論元素進入瀏覽器視口時加載</span></span><br><span class="line">  <span class="comment"># 如果設置為 true，評論計數將無效</span></span><br><span class="line">  <span class="attr">lazyload:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 在文章頂部圖片中顯示評論計數</span></span><br><span class="line">  <span class="attr">count:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 在主頁顯示評論計數</span></span><br><span class="line">  <span class="attr">card_post_count:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Disqus 評論插件配置</span></span><br><span class="line"><span class="comment"># 官方文檔：https://disqus.com/</span></span><br><span class="line"><span class="attr">disqus:</span></span><br><span class="line">  <span class="comment"># Disqus 的 shortname</span></span><br><span class="line">  <span class="attr">shortname:</span></span><br><span class="line">  <span class="comment"># 最新評論小部件的 API 密鑰</span></span><br><span class="line">  <span class="attr">apikey:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 使用 Disqus API 渲染評論的替代方案</span></span><br><span class="line"><span class="comment"># 官方文檔：https://github.com/SukkaW/DisqusJS</span></span><br><span class="line"><span class="attr">disqusjs:</span></span><br><span class="line">  <span class="comment"># Disqus 的 shortname</span></span><br><span class="line">  <span class="attr">shortname:</span></span><br><span class="line">  <span class="comment"># API 密鑰</span></span><br><span class="line">  <span class="attr">apikey:</span></span><br><span class="line">  <span class="comment"># 其他可選配置</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Livere 評論插件配置</span></span><br><span class="line"><span class="comment"># 官方文檔：https://www.livere.com/</span></span><br><span class="line"><span class="attr">livere:</span></span><br><span class="line">  <span class="comment"># Livere 的用户 ID</span></span><br><span class="line">  <span class="attr">uid:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Gitalk 評論插件配置</span></span><br><span class="line"><span class="comment"># 官方文檔：https://github.com/gitalk/gitalk</span></span><br><span class="line"><span class="attr">gitalk:</span></span><br><span class="line">  <span class="comment"># GitHub 應用的客户端 ID</span></span><br><span class="line">  <span class="attr">client_id:</span></span><br><span class="line">  <span class="comment"># GitHub 應用的客户端密鑰</span></span><br><span class="line">  <span class="attr">client_secret:</span></span><br><span class="line">  <span class="comment"># 存儲評論的倉庫名稱</span></span><br><span class="line">  <span class="attr">repo:</span></span><br><span class="line">  <span class="comment"># 倉庫擁有者的用户名</span></span><br><span class="line">  <span class="attr">owner:</span></span><br><span class="line">  <span class="comment"># 管理員用户名列表</span></span><br><span class="line">  <span class="attr">admin:</span></span><br><span class="line">  <span class="comment"># 其他可選配置</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Valine 評論插件配置</span></span><br><span class="line"><span class="comment"># 官方文檔：https://valine.js.org</span></span><br><span class="line"><span class="attr">valine:</span></span><br><span class="line">  <span class="comment"># LeanCloud 應用的 appId</span></span><br><span class="line">  <span class="attr">appId:</span></span><br><span class="line">  <span class="comment"># LeanCloud 應用的 appKey</span></span><br><span class="line">  <span class="attr">appKey:</span></span><br><span class="line">  <span class="comment"># 評論者頭像樣式</span></span><br><span class="line">  <span class="attr">avatar:</span> <span class="string">monsterid</span></span><br><span class="line">  <span class="comment"># 該配置適用於國內自定義域名用户，海外版本將自動檢測（無需手動填寫）</span></span><br><span class="line">  <span class="attr">serverURLs:</span></span><br><span class="line">  <span class="comment"># 評論框背景圖片</span></span><br><span class="line">  <span class="attr">bg:</span></span><br><span class="line">  <span class="comment"># 使用 Valine 的訪客計數作為頁面的訪客量</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 其他可選配置</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Waline 評論插件配置，一個簡單的評論系統，基於 Valine 開發，支持後端</span></span><br><span class="line"><span class="comment"># 官方文檔：https://waline.js.org/</span></span><br><span class="line"><span class="attr">waline:</span></span><br><span class="line">  <span class="comment"># 服務器 URL</span></span><br><span class="line">  <span class="attr">serverURL:</span></span><br><span class="line">  <span class="comment"># 評論框背景圖片</span></span><br><span class="line">  <span class="attr">bg:</span></span><br><span class="line">  <span class="comment"># 使用 Waline 的訪客計數作為頁面的訪客量</span></span><br><span class="line">  <span class="attr">pageview:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 其他可選配置</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Utterances 評論插件配置</span></span><br><span class="line"><span class="comment"># 官方文檔：https://utteranc.es/</span></span><br><span class="line"><span class="attr">utterances:</span></span><br><span class="line">  <span class="comment"># 存儲評論的 GitHub 倉庫</span></span><br><span class="line">  <span class="attr">repo:</span></span><br><span class="line">  <span class="comment"># 問題映射方式，可選值：pathname/url/title/og:title</span></span><br><span class="line">  <span class="attr">issue_term:</span> <span class="string">pathname</span></span><br><span class="line">  <span class="comment"># 淺色主題，可選值：github-light</span></span><br><span class="line">  <span class="attr">light_theme:</span> <span class="string">github-light</span></span><br><span class="line">  <span class="comment"># 深色主題，可選值：photon-dark</span></span><br><span class="line">  <span class="attr">dark_theme:</span> <span class="string">photon-dark</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Facebook 評論插件配置</span></span><br><span class="line"><span class="comment"># 官方文檔：https://developers.facebook.com/docs/plugins/comments/</span></span><br><span class="line"><span class="attr">facebook_comments:</span></span><br><span class="line">  <span class="comment"># 應用 ID</span></span><br><span class="line">  <span class="attr">app_id:</span></span><br><span class="line">  <span class="comment"># 用户 ID，可選</span></span><br><span class="line">  <span class="attr">user_id:</span></span><br><span class="line">  <span class="comment"># 每頁顯示評論數</span></span><br><span class="line">  <span class="attr">pageSize:</span> <span class="number">10</span></span><br><span class="line">  <span class="comment"># 評論排序方式，可選值：social / time / reverse_time</span></span><br><span class="line">  <span class="attr">order_by:</span> <span class="string">social</span></span><br><span class="line">  <span class="comment"># 語言設置</span></span><br><span class="line">  <span class="attr">lang:</span> <span class="string">zh_TW</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Twikoo 評論插件配置</span></span><br><span class="line"><span class="comment"># 官方文檔：https://github.com/imaegoo/twikoo</span></span><br><span class="line"><span class="attr">twikoo:</span></span><br><span class="line">  <span class="comment"># 環境 ID</span></span><br><span class="line">  <span class="attr">envId:</span></span><br><span class="line">  <span class="comment"># 區域</span></span><br><span class="line">  <span class="attr">region:</span></span><br><span class="line">  <span class="comment"># 使用 Twikoo 的訪客計數作為頁面的訪客量</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 其他可選配置</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Giscus 評論插件配置</span></span><br><span class="line"><span class="comment"># 官方文檔：https://giscus.app/</span></span><br><span class="line"><span class="attr">giscus:</span></span><br><span class="line">  <span class="comment"># 倉庫地址</span></span><br><span class="line">  <span class="attr">repo:</span></span><br><span class="line">  <span class="comment"># 倉庫 ID</span></span><br><span class="line">  <span class="attr">repo_id:</span></span><br><span class="line">  <span class="comment"># 分類 ID</span></span><br><span class="line">  <span class="attr">category_id:</span></span><br><span class="line">  <span class="comment"># 主題配置，light 為淺色主題，dark 為深色主題</span></span><br><span class="line">  <span class="attr">theme:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">light</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">dark</span></span><br><span class="line">  <span class="comment"># 其他可選配置</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Remark42 評論插件配置</span></span><br><span class="line"><span class="comment"># 官方文檔：https://remark42.com/docs/configuration/frontend/</span></span><br><span class="line"><span class="attr">remark42:</span></span><br><span class="line">  <span class="comment"># 服務器地址</span></span><br><span class="line">  <span class="attr">host:</span></span><br><span class="line">  <span class="comment"># 站點 ID</span></span><br><span class="line">  <span class="attr">siteId:</span></span><br><span class="line">  <span class="comment"># 其他可選配置</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Artalk 評論插件配置</span></span><br><span class="line"><span class="comment"># 官方文檔：https://artalk.js.org/guide/frontend/config.html</span></span><br><span class="line"><span class="attr">artalk:</span></span><br><span class="line">  <span class="comment"># 服務器地址</span></span><br><span class="line">  <span class="attr">server:</span></span><br><span class="line">  <span class="comment"># 站點名</span></span><br><span class="line">  <span class="attr">site:</span></span><br><span class="line">  <span class="comment"># 使用 Artalk 的訪客計數作為頁面的訪客量</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 其他可選配置</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 聊天服務配置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">chat:</span></span><br><span class="line">  <span class="comment"># 聊天服務類型，可選值：chatra/tidio/daovoice/crisp，如果不需要聊天功能則留空</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="comment"># 推薦使用聊天按鈕，會在網站右下角創建一個按鈕，並隱藏原始按鈕</span></span><br><span class="line">  <span class="attr">rightside_button:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 原始聊天按鈕在向上滾動時顯示，向下滾動時隱藏</span></span><br><span class="line">  <span class="attr">button_hide_show:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Chatra 聊天服務配置</span></span><br><span class="line"><span class="comment"># 官方網站：https://chatra.io/</span></span><br><span class="line"><span class="attr">chatra:</span></span><br><span class="line">  <span class="comment"># Chatra 服務 ID</span></span><br><span class="line">  <span class="attr">id:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Tidio 聊天服務配置</span></span><br><span class="line"><span class="comment"># 官方網站：https://www.tidio.com/</span></span><br><span class="line"><span class="attr">tidio:</span></span><br><span class="line">  <span class="comment"># Tidio 公鑰</span></span><br><span class="line">  <span class="attr">public_key:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Daovoice 聊天服務配置</span></span><br><span class="line"><span class="comment"># 官方網站：http://dashboard.daovoice.io/app</span></span><br><span class="line"><span class="attr">daovoice:</span></span><br><span class="line">  <span class="comment"># Daovoice 應用 ID</span></span><br><span class="line">  <span class="attr">app_id:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Crisp 聊天服務配置</span></span><br><span class="line"><span class="comment"># 官方網站：https://crisp.chat/en/</span></span><br><span class="line"><span class="attr">crisp:</span></span><br><span class="line">  <span class="comment"># Crisp 網站 ID</span></span><br><span class="line">  <span class="attr">website_id:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 分析服務配置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 百度統計配置</span></span><br><span class="line"><span class="comment"># 官方網站：https://tongji.baidu.com/web/welcome/login</span></span><br><span class="line"><span class="attr">baidu_analytics:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 谷歌分析配置</span></span><br><span class="line"><span class="comment"># 官方網站：https://analytics.google.com/analytics/web/</span></span><br><span class="line"><span class="attr">google_analytics:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Cloudflare 分析配置</span></span><br><span class="line"><span class="comment"># 官方網站：https://www.cloudflare.com/zh-tw/web-analytics/</span></span><br><span class="line"><span class="attr">cloudflare_analytics:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Microsoft Clarity 分析配置</span></span><br><span class="line"><span class="comment"># 官方網站：https://clarity.microsoft.com/</span></span><br><span class="line"><span class="attr">microsoft_clarity:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 廣告配置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Google Adsense 廣告配置</span></span><br><span class="line"><span class="attr">google_adsense:</span></span><br><span class="line">  <span class="comment"># 是否啟用</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否自動投放廣告</span></span><br><span class="line">  <span class="attr">auto_ads:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 廣告腳本 URL</span></span><br><span class="line">  <span class="attr">js:</span> <span class="string">https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</span></span><br><span class="line">  <span class="comment"># 客户 ID</span></span><br><span class="line">  <span class="attr">client:</span></span><br><span class="line">  <span class="comment"># 是否啟用頁面級廣告</span></span><br><span class="line">  <span class="attr">enable_page_level_ads:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 手動插入廣告配置，如果不需要廣告則留空</span></span><br><span class="line"><span class="attr">ad:</span></span><br><span class="line">  <span class="comment"># 在首頁每三個帖子後插入廣告</span></span><br><span class="line">  <span class="attr">index:</span></span><br><span class="line">  <span class="comment"># 在側邊欄插入廣告</span></span><br><span class="line">  <span class="attr">aside:</span></span><br><span class="line">  <span class="comment"># 在文章分頁前插入廣告</span></span><br><span class="line">  <span class="attr">post:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 站點驗證配置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">site_verification:</span></span><br><span class="line">  <span class="comment"># 示例：</span></span><br><span class="line">  <span class="comment"># - name: google-site-verification</span></span><br><span class="line">  <span class="comment">#   content: xxxxxx</span></span><br><span class="line">  <span class="comment"># - name: baidu-site-verification</span></span><br><span class="line">  <span class="comment">#   content: xxxxxxx</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 美化 / 效果</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 主題顏色自定義</span></span><br><span class="line"><span class="comment"># 注意：顏色值必須用雙引號，如 &quot;#000&quot;，否則可能會導致錯誤！</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 主題顏色配置</span></span><br><span class="line"><span class="comment"># theme_color:</span></span><br><span class="line"><span class="comment">#   是否啟用主題顏色</span></span><br><span class="line"><span class="comment">#   enable: true</span></span><br><span class="line"><span class="comment">#   主顏色</span></span><br><span class="line"><span class="comment">#   main: &quot;#49B1F5&quot;</span></span><br><span class="line"><span class="comment">#   分頁器顏色</span></span><br><span class="line"><span class="comment">#   paginator: &quot;#00c4b6&quot;</span></span><br><span class="line"><span class="comment">#   按鈕懸停顏色</span></span><br><span class="line"><span class="comment">#   button_hover: &quot;#FF7242&quot;</span></span><br><span class="line"><span class="comment">#   文本選擇顏色</span></span><br><span class="line"><span class="comment">#   text_selection: &quot;#00c4b6&quot;</span></span><br><span class="line"><span class="comment">#   鏈接顏色</span></span><br><span class="line"><span class="comment">#   link_color: &quot;#99a9bf&quot;</span></span><br><span class="line"><span class="comment">#   元數據顏色</span></span><br><span class="line"><span class="comment">#   meta_color: &quot;#858585&quot;</span></span><br><span class="line"><span class="comment">#   水平線顏色</span></span><br><span class="line"><span class="comment">#   hr_color: &quot;#A4D8FA&quot;</span></span><br><span class="line"><span class="comment">#   代碼前景色</span></span><br><span class="line"><span class="comment">#   code_foreground: &quot;#F47466&quot;</span></span><br><span class="line"><span class="comment">#   代碼背景色</span></span><br><span class="line"><span class="comment">#   code_background: &quot;rgba(27, 31, 35, .05)&quot;</span></span><br><span class="line"><span class="comment">#   目錄顏色</span></span><br><span class="line"><span class="comment">#   toc_color: &quot;#00c4b6&quot;</span></span><br><span class="line"><span class="comment">#   引用塊填充顏色</span></span><br><span class="line"><span class="comment">#   blockquote_padding_color: &quot;#49b1f5&quot;</span></span><br><span class="line"><span class="comment">#   引用塊背景顏色</span></span><br><span class="line"><span class="comment">#   blockquote_background_color: &quot;#49b1f5&quot;</span></span><br><span class="line"><span class="comment">#   滾動條顏色</span></span><br><span class="line"><span class="comment">#   scrollbar_color: &quot;#49b1f5&quot;</span></span><br><span class="line"><span class="comment">#   淺色模式下的主題顏色</span></span><br><span class="line"><span class="comment">#   meta_theme_color_light: &quot;ffffff&quot;</span></span><br><span class="line"><span class="comment">#   深色模式下的主題顏色</span></span><br><span class="line"><span class="comment">#   meta_theme_color_dark: &quot;#0d0d0d&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 分類和標籤頁面的用户界面設置</span></span><br><span class="line"><span class="comment"># 選擇：index - 與主頁 UI 相同 / default - 與歸檔 UI 相同</span></span><br><span class="line"><span class="comment"># 留空或設置為 index</span></span><br><span class="line"><span class="attr">category_ui:</span></span><br><span class="line"><span class="attr">tag_ui:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 拉伸行使每行寬度相等</span></span><br><span class="line"><span class="attr">text_align_justify:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 為頁眉和頁腳添加遮罩</span></span><br><span class="line"><span class="attr">mask:</span></span><br><span class="line">  <span class="attr">header:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">footer:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 加載動畫</span></span><br><span class="line"><span class="attr">preloader:</span></span><br><span class="line">  <span class="comment"># 是否啟用加載動畫</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 資源</span></span><br><span class="line">  <span class="comment"># 1. 全屏加載</span></span><br><span class="line">  <span class="comment"># 2. 進度條</span></span><br><span class="line">  <span class="attr">source:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment"># pace 主題 (參見 https://codebyzach.github.io/pace/)</span></span><br><span class="line">  <span class="attr">pace_css_url:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 頁面過渡效果</span></span><br><span class="line"><span class="attr">enter_transitions:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 默認顯示模式 - light (默認) / dark</span></span><br><span class="line"><span class="attr">display_mode:</span> <span class="string">light</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 美化文章內容的配置</span></span><br><span class="line"><span class="attr">beautify:</span></span><br><span class="line">  <span class="comment"># 是否啟用美化</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 指定美化的範圍 (site 或 post)</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">post</span></span><br><span class="line">  <span class="comment"># 指定標題前綴圖標，如 &#x27;\f0c1&#x27;</span></span><br><span class="line">  <span class="attr">title-prefix-icon:</span></span><br><span class="line">  <span class="comment"># 指定標題前綴圖標的顏色，如 &#x27;#F47466&#x27;</span></span><br><span class="line">  <span class="attr">title-prefix-icon-color:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 全局字體設置</span></span><br><span class="line"><span class="comment"># 除非您知道它們的工作原理，否則不要修改以下設置</span></span><br><span class="line"><span class="attr">font:</span></span><br><span class="line">  <span class="attr">global-font-size:</span></span><br><span class="line">  <span class="attr">code-font-size:</span></span><br><span class="line">  <span class="attr">font-family:</span></span><br><span class="line">  <span class="attr">code-font-family:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 網站標題和副標題的字體設置</span></span><br><span class="line"><span class="attr">blog_title_font:</span></span><br><span class="line">  <span class="attr">font_link:</span></span><br><span class="line">  <span class="attr">font-family:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 分隔符圖標的設置</span></span><br><span class="line"><span class="attr">hr_icon:</span></span><br><span class="line">  <span class="comment"># 是否啟用分隔符圖標</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Font Awesome 圖標的 unicode 值，如 &#x27;\3423&#x27;</span></span><br><span class="line">  <span class="attr">icon:</span></span><br><span class="line">  <span class="attr">icon-top:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 打字機效果</span></span><br><span class="line"><span class="comment"># https://github.com/disjukr/activate-power-mode</span></span><br><span class="line"><span class="attr">activate_power_mode:</span></span><br><span class="line">  <span class="comment"># 是否啟用打字機效果</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否啟用彩色效果</span></span><br><span class="line">  <span class="attr">colorful:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 是否啟用震動效果</span></span><br><span class="line">  <span class="attr">shake:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 是否在移動設備上啟用</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 背景效果</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># canvas_ribbon</span></span><br><span class="line"><span class="comment"># 參見: https://github.com/hustcc/ribbon.js</span></span><br><span class="line"><span class="attr">canvas_ribbon:</span></span><br><span class="line">  <span class="comment"># 是否啟用 canvas_ribbon</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># ribbon 的大小</span></span><br><span class="line">  <span class="attr">size:</span> <span class="number">150</span></span><br><span class="line">  <span class="comment"># ribbon 的不透明度 (0 ~ 1)</span></span><br><span class="line">  <span class="attr">alpha:</span> <span class="number">0.6</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">-1</span></span><br><span class="line">  <span class="comment"># 是否點擊更改顏色</span></span><br><span class="line">  <span class="attr">click_to_change:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否在移動設備上啟用</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Fluttering Ribbon</span></span><br><span class="line"><span class="attr">canvas_fluttering_ribbon:</span></span><br><span class="line">  <span class="comment"># 是否啟用 Fluttering Ribbon</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否在移動設備上啟用</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># canvas_nest</span></span><br><span class="line"><span class="comment"># https://github.com/hustcc/canvas-nest.js</span></span><br><span class="line"><span class="attr">canvas_nest:</span></span><br><span class="line">  <span class="comment"># 是否啟用 canvas_nest</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 線條顏色，默認: &#x27;0,0,0&#x27;; RGB 值: (R,G,B).(注意: 使用 &#x27;,&#x27; 分隔.)</span></span><br><span class="line">  <span class="attr">color:</span> <span class="string">&#x27;0,0,255&#x27;</span></span><br><span class="line">  <span class="comment"># 線條的不透明度 (0~1)</span></span><br><span class="line">  <span class="attr">opacity:</span> <span class="number">0.7</span></span><br><span class="line">  <span class="comment"># 背景的 z-index 屬性</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">-1</span></span><br><span class="line">  <span class="comment"># 線條數量</span></span><br><span class="line">  <span class="attr">count:</span> <span class="number">99</span></span><br><span class="line">  <span class="comment"># 是否在移動設備上啟用</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 鼠標點擊效果: 煙花</span></span><br><span class="line"><span class="attr">fireworks:</span></span><br><span class="line">  <span class="comment"># 是否啟用煙花效果</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">9999</span></span><br><span class="line">  <span class="comment"># 是否在移動設備上啟用</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 鼠標點擊效果: 心形符號</span></span><br><span class="line"><span class="attr">click_heart:</span></span><br><span class="line">  <span class="comment"># 是否啟用心形符號效果</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否在移動設備上啟用</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 鼠標點擊效果: 文字</span></span><br><span class="line"><span class="attr">clickShowText:</span></span><br><span class="line">  <span class="comment"># 是否啟用文字效果</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">text:</span></span><br><span class="line">    <span class="comment"># - I</span></span><br><span class="line">    <span class="comment"># - LOVE</span></span><br><span class="line">    <span class="comment"># - YOU</span></span><br><span class="line">  <span class="attr">fontSize:</span> <span class="string">15px</span></span><br><span class="line">  <span class="comment"># 是否隨機顯示文字</span></span><br><span class="line">  <span class="attr">random:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否在移動設備上啟用</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 燈箱設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 選擇: fancybox / medium_zoom</span></span><br><span class="line"><span class="comment"># https://github.com/francoischalifour/medium-zoom</span></span><br><span class="line"><span class="comment"># https://fancyapps.com/fancybox/</span></span><br><span class="line"><span class="comment"># 如果不需要燈箱效果，請留空</span></span><br><span class="line"><span class="attr">lightbox:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 標籤外掛設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 系列</span></span><br><span class="line"><span class="attr">series:</span></span><br><span class="line">  <span class="comment"># 是否啟用系列</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 按標題或日期排序</span></span><br><span class="line">  <span class="attr">orderBy:</span> <span class="string">&#x27;title&#x27;</span></span><br><span class="line">  <span class="comment"># 排序方式。1, asc 為升序; -1, desc 為降序</span></span><br><span class="line">  <span class="attr">order:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment"># 是否顯示編號</span></span><br><span class="line">  <span class="attr">number:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># ABCJS - ABC 音樂符號插件</span></span><br><span class="line"><span class="comment"># https://github.com/paulrosen/abcjs</span></span><br><span class="line"><span class="attr">abcjs:</span></span><br><span class="line">  <span class="comment"># 是否啟用 ABCJS</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否每頁啟用</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Mermaid</span></span><br><span class="line"><span class="comment"># https://github.com/mermaid-js/mermaid</span></span><br><span class="line"><span class="attr">mermaid:</span></span><br><span class="line">  <span class="comment"># 是否啟用 Mermaid</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 使用代碼塊編寫 Mermaid 圖表</span></span><br><span class="line">  <span class="attr">code_write:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 內置主題: default / forest / dark / neutral</span></span><br><span class="line">  <span class="attr">theme:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">default</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">dark</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Note - Bootstrap 提示框</span></span><br><span class="line"><span class="attr">note:</span></span><br><span class="line">  <span class="comment"># Note 標籤樣式值:</span></span><br><span class="line">  <span class="comment">#  - simple    bs-callout 舊警告樣式。默認。</span></span><br><span class="line">  <span class="comment">#  - modern    bs-callout 新 (v2-v3) 警告樣式。</span></span><br><span class="line">  <span class="comment">#  - flat      扁平提示框樣式，帶背景，如 Mozilla 或 StackOverflow。</span></span><br><span class="line">  <span class="comment">#  - disabled  禁用所有 Note 標籤的 CSS 樣式。</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">flat</span></span><br><span class="line">  <span class="comment"># 是否顯示圖標</span></span><br><span class="line">  <span class="attr">icons:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 邊框半徑</span></span><br><span class="line">  <span class="attr">border_radius:</span> <span class="number">3</span></span><br><span class="line">  <span class="comment"># 背景顏色偏移百分比 (modern: -12 | 12; flat: -18 | 6)。</span></span><br><span class="line">  <span class="comment"># 也應用於標籤變量。此選項可與禁用的 Note 標籤一起使用。</span></span><br><span class="line">  <span class="attr">light_bg_offset:</span> <span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># 其他設置</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://github.com/MoOx/pjax</span></span><br><span class="line"><span class="attr">pjax:</span></span><br><span class="line">  <span class="comment"># 是否啟用 pjax</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 排除指定頁面不使用 pjax，如 &#x27;/music/&#x27;</span></span><br><span class="line">  <span class="attr">exclude:</span></span><br><span class="line">    <span class="comment"># - /xxxxxx/</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 注入 CSS 和腳本 (aplayer/meting)</span></span><br><span class="line"><span class="attr">aplayerInject:</span></span><br><span class="line">  <span class="comment"># 是否啟用注入</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 是否每頁啟用</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Snackbar - Toast 通知</span></span><br><span class="line"><span class="comment"># https://github.com/polonel/SnackBar</span></span><br><span class="line"><span class="comment"># 位置: top-left / top-center / top-right / bottom-left / bottom-center / bottom-right</span></span><br><span class="line"><span class="attr">snackbar:</span></span><br><span class="line">  <span class="comment"># 是否啟用 Snackbar</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 通知位置</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">bottom-left</span></span><br><span class="line">  <span class="comment"># 淺色模式和深色模式下的通知背景顏色</span></span><br><span class="line">  <span class="attr">bg_light:</span> <span class="string">&#x27;#49b1f5&#x27;</span></span><br><span class="line">  <span class="attr">bg_dark:</span> <span class="string">&#x27;#1f1f1f&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Instant.page</span></span><br><span class="line"><span class="comment"># https://instant.page/</span></span><br><span class="line"><span class="attr">instantpage:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Pangu - 在中文字符和英文字符之間插入空格</span></span><br><span class="line"><span class="comment"># https://github.com/vinta/pangu.js</span></span><br><span class="line"><span class="attr">pangu:</span></span><br><span class="line">  <span class="comment"># 是否啟用 Pangu</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 指定使用 Pangu 的範圍(site 或 post)</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">site</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Lazyload</span></span><br><span class="line"><span class="comment"># https://github.com/verlok/vanilla-lazyload</span></span><br><span class="line"><span class="attr">lazyload:</span></span><br><span class="line">  <span class="comment"># 是否啟用 Lazyload</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 指定使用 Lazyload 的範圍 (site 或 post)</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">site</span></span><br><span class="line">  <span class="attr">placeholder:</span></span><br><span class="line">  <span class="attr">blur:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># PWA</span></span><br><span class="line"><span class="comment"># 參見 https://github.com/JLHwung/hexo-offline</span></span><br><span class="line"><span class="comment"># ---------------</span></span><br><span class="line"><span class="attr">pwa:</span></span><br><span class="line">  <span class="comment"># 是否啟用 PWA</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># PWA manifest 文件路徑</span></span><br><span class="line">  <span class="attr">manifest:</span></span><br><span class="line">  <span class="comment"># Apple Touch 圖標路徑</span></span><br><span class="line">  <span class="attr">apple_touch_icon:</span></span><br><span class="line">  <span class="comment"># 32x32 像素的 favicon 圖標路徑</span></span><br><span class="line">  <span class="attr">favicon_32_32:</span></span><br><span class="line">  <span class="comment"># 16x16 像素的 favicon 圖標路徑</span></span><br><span class="line">  <span class="attr">favicon_16_16:</span></span><br><span class="line">  <span class="comment"># mask 圖標路徑</span></span><br><span class="line">  <span class="attr">mask_icon:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Open graph meta tags</span></span><br><span class="line"><span class="comment"># 參見 https://hexo.io/docs/helpers#open-graph</span></span><br><span class="line"><span class="attr">Open_Graph_meta:</span></span><br><span class="line">  <span class="comment"># 是否啟用 Open Graph meta 標籤</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line">    <span class="comment"># twitter_card:</span></span><br><span class="line">    <span class="comment"># twitter_image:</span></span><br><span class="line">    <span class="comment"># twitter_id:</span></span><br><span class="line">    <span class="comment"># twitter_site:</span></span><br><span class="line">    <span class="comment"># google_plus:</span></span><br><span class="line">    <span class="comment"># fb_admins:</span></span><br><span class="line">    <span class="comment"># fb_app_id:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 添加供應商前綴以確保兼容性</span></span><br><span class="line"><span class="comment"># 是否啟用 CSS 前綴</span></span><br><span class="line"><span class="attr">css_prefix:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Inject</span></span><br><span class="line"><span class="comment"># 插入代碼到 head（在 &#x27;&lt;/head&gt;&#x27; 標籤之前）和底部（在 &#x27;&lt;/body&gt;&#x27; 標籤之前）</span></span><br><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">    <span class="comment"># - &lt;link rel=&quot;stylesheet&quot; href=&quot;/xxx.css&quot;&gt;</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">    <span class="comment"># - &lt;script src=&quot;xxxx&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># CDN 設置</span></span><br><span class="line"><span class="comment"># 除非你知道它們的工作原理，否則不要修改以下設置</span></span><br><span class="line"><span class="attr">CDN:</span></span><br><span class="line">  <span class="comment"># 內部和第三方腳本的 CDN 提供商</span></span><br><span class="line">  <span class="comment"># 兩者的選項：local/jsdelivr/unpkg/cdnjs/custom</span></span><br><span class="line">  <span class="comment"># 注意： Dev 版本只能使用 &#x27;local&#x27; 作為內部腳本</span></span><br><span class="line">  <span class="comment"># 注意：將第三方腳本設置為 &#x27;local&#x27; 時，需要安裝 hexo-butterfly-extjs</span></span><br><span class="line">  <span class="attr">internal_provider:</span> <span class="string">local</span></span><br><span class="line">  <span class="attr">third_party_provider:</span> <span class="string">jsdelivr</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># 是否在 URL 中添加版本號，true 或 false</span></span><br><span class="line">  <span class="attr">version:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># 自定義格式</span></span><br><span class="line">  <span class="comment"># 例如：https://cdn.staticfile.org/$&#123;cdnjs_name&#125;/$&#123;version&#125;/$&#123;min_cdnjs_file&#125;</span></span><br><span class="line">  <span class="attr">custom_format:</span></span><br><span class="line"></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure>

<h2 id="語言"><a href="#語言" class="headerlink" title="語言"></a>語言</h2><p>修改 Hexo 的配置文件 <code>_config.yml</code></p>
<p>默認語言是 <code>en</code></p>
<p>主題支持</p>
<ul>
<li>default(en)</li>
<li>zh-CN (簡體中文)</li>
<li>zh-TW (台灣繁體中文)</li>
<li>zh-HK (香港繁體中文)</li>
<li>ja (日語)</li>
<li>ko (韓語)</li>
</ul>
<h2 id="網站資料"><a href="#網站資料" class="headerlink" title="網站資料"></a>網站資料</h2><p>修改網站各種資料，例如標題、副標題和郵箱等個人資料，請修改 Hexo 的<code>_config.yml</code></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-hexo-config.png" alt="butterfly-docs-hexo-config.png"></p>
<h2 id="導航"><a href="#導航" class="headerlink" title="導航"></a>導航</h2><h3 id="參數設置"><a href="#參數設置" class="headerlink" title="參數設置"></a>參數設置</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">nav:</span></span><br><span class="line">  <span class="comment"># Navigation bar logo image</span></span><br><span class="line">  <span class="attr">logo:</span> <span class="string">/xxxx.png</span></span><br><span class="line">  <span class="attr">display_title:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Whether to fix navigation bar</span></span><br><span class="line">  <span class="attr">fixed:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>logo</td>
<td>網站的 logo，支持圖片，直接填入圖片鏈接</td>
</tr>
<tr>
<td>display_title</td>
<td>是否顯示網站標題，填寫 true 或者 false</td>
</tr>
<tr>
<td>fixed</td>
<td>是否固定狀態欄，填寫 true 或者 false</td>
</tr>
</tbody></table>
<h3 id="目錄"><a href="#目錄" class="headerlink" title="目錄"></a>目錄</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">Home:</span> <span class="string">/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-home</span></span><br><span class="line"><span class="attr">Archives:</span> <span class="string">/archives/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-archive</span></span><br><span class="line"><span class="attr">Tags:</span> <span class="string">/tags/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-tags</span></span><br><span class="line"><span class="attr">Categories:</span> <span class="string">/categories/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-folder-open</span></span><br><span class="line"><span class="string">List||fas</span> <span class="attr">fa-list:</span></span><br><span class="line">  <span class="attr">Music:</span> <span class="string">/music/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-music</span></span><br><span class="line">  <span class="attr">Movie:</span> <span class="string">/movies/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-video</span></span><br><span class="line"><span class="attr">Link:</span> <span class="string">/link/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-link</span></span><br><span class="line"><span class="attr">About:</span> <span class="string">/about/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-heart</span></span><br></pre></td></tr></table></figure>

<p>必須是 <code>/xxx/</code>，後面<code>||</code>分開，然後寫圖標名。</p>
<p>如果不希望顯示圖標，圖標名可不寫。</p>
<p>默認子目錄是展開的，如果你想要隱藏，在子目錄裏添加 <code>hide</code> 。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">List||fas</span> <span class="string">fa-list||hide:</span></span><br><span class="line">  <span class="attr">Music:</span> <span class="string">/music/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-music</span></span><br><span class="line">  <span class="attr">Movie:</span> <span class="string">/movies/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-video</span></span><br></pre></td></tr></table></figure>

<p><strong>注意：</strong> 導航的文字可自行更改</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">menu:</span><br><span class="line">首頁: / || fas fa-home</span><br><span class="line">時間軸: /archives/ || fas fa-archive</span><br><span class="line">標籤: /tags/ || fas fa-tags</span><br><span class="line">分類: /categories/ || fas fa-folder-open</span><br><span class="line">清單||fa fa-heartbeat:</span><br><span class="line">音樂: /music/ || fas fa-music</span><br><span class="line">照片: /Gallery/ || fas fa-images</span><br><span class="line">電影: /movies/ || fas fa-video</span><br><span class="line">友鏈: /link/ || fas fa-link</span><br><span class="line">關於: /about/ || fas fa-heart</span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-menu.png" alt="hexo-theme-butterfly-doc-menu.png"></p>
<h2 id="代碼塊"><a href="#代碼塊" class="headerlink" title="代碼塊"></a>代碼塊</h2><div class="note info flat"><p>代碼塊中的所有功能只適用於 Hexo 自帶的代碼渲染</p>
<p>如果使用第三方的渲染器，不一定會有效</p>
</div>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">code_blocks:</span></span><br><span class="line">  <span class="comment"># Code block theme: darker / pale night / light / ocean / false</span></span><br><span class="line">  <span class="attr">theme:</span> <span class="string">light</span></span><br><span class="line">  <span class="attr">macStyle:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Code block height limit (unit: px)</span></span><br><span class="line">  <span class="attr">height_limit:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">word_wrap:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Toolbar</span></span><br><span class="line">  <span class="attr">copy:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">language:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># true: shrink the code blocks | false: expand the code blocks | none: expand code blocks and hide the button</span></span><br><span class="line">  <span class="attr">shrink:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">fullpage:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>theme</td>
<td>代碼高亮主題，可選 darker &#x2F; pale night &#x2F; light &#x2F; ocean &#x2F; false</td>
</tr>
<tr>
<td>macStyle</td>
<td>是否使用 Mac 風格</td>
</tr>
<tr>
<td>height_limit</td>
<td>代碼塊高度限制（單位: px）, 可填寫 數字 或者 false</td>
</tr>
<tr>
<td>word_wrap</td>
<td>是否自動換行</td>
</tr>
<tr>
<td>copy</td>
<td>是否顯示複製按鈕</td>
</tr>
<tr>
<td>language</td>
<td>是否顯示語言標籤</td>
</tr>
<tr>
<td>shrink</td>
<td>true: 收縮代碼塊 &#x2F; false: 展開代碼塊 &#x2F; none: 展開代碼塊並隱藏按鈕</td>
</tr>
<tr>
<td>fullpage</td>
<td>是否全屏顯示代碼塊</td>
</tr>
</tbody></table>
<h3 id="代碼高亮主題"><a href="#代碼高亮主題" class="headerlink" title="代碼高亮主題"></a>代碼高亮主題</h3><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">默認主題</button><button type="button" class="tab">自定義主題</button></div><div class="tab-contents"><div class="tab-item-content active"><p><code>Butterfly</code> 支持 6 種代碼高亮樣式：</p>
<ul>
<li>darker</li>
<li>pale night</li>
<li>light</li>
<li>ocean</li>
</ul>
<p>如果你需要 MacOS 風格的代碼高亮樣式，可以把<code>macStyle</code> 設為 <code>true</code>。</p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>darker</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-code-darker.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>pale night</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-code-pane-night.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>light</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-code-light.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>ocean</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-code-orcean.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>macStyle</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-code-macstyle-light.png"></p></div><div class="tab-item-content"><p>主題從 3.0 開始，支持使用自定義的代碼顔色。</p>
<p>如何自定義主題，請查看下面這篇文章。</p>
<p><a href="/article/b37b5fe3.html" title="自定義代碼配色">自定義代碼配色</a></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div>

<h3 id="代碼框展開-關閉"><a href="#代碼框展開-關閉" class="headerlink" title="代碼框展開&#x2F;關閉"></a>代碼框展開&#x2F;關閉</h3><p>在默認情況下，代碼框自動展開，可設置是否所有代碼框都關閉狀態，點擊<code>&gt;</code>可展開代碼</p>
<ul>
<li>true 全部代碼框不展開，需點擊<code>&gt;</code>打開</li>
<li>false 代碼框展開，有<code>&gt;</code>點擊按鈕</li>
<li>none 不顯示<code>&gt;</code>按鈕</li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight_shrink:</span> <span class="literal">true</span> <span class="comment">#代碼框不展開，需點擊 &#x27;&gt;&#x27; 打開</span></span><br></pre></td></tr></table></figure>

<div class="note info flat"><p>你也可以在 post&#x2F;page 頁對應的 markdown 文件 front-matter 添加 highlight_shrink 來獨立配置。</p>
<p>當<strong>主題配置文件中</strong>的 <code>highlight_shrink </code>設為 true 時，可在 front-matter 添加<code>highlight_shrink: false</code>來單獨配置文章展開代碼框。</p>
<p>當<strong>主題配置文件中</strong>的 <code>highlight_shrink </code>設為 false 時，可在 front-matter 添加<code>highlight_shrink: true</code>來單獨配置文章收縮代碼框。</p>
</div>

<p><code>highlight_shrink: true</code></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-highlight-shrink-true.png" alt="hexo-theme-butterfly-doc-highlight-shrink-true.png"></p>
<p><code>highlight_shrink: false</code></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-highlight-shrink-false.png" alt="hexo-theme-butterfly-doc-highlight-shrink-false.png"></p>
<p><code>highlight_shrink: none</code></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-highlight-shirk-none.png" alt="hexo-theme-butterfly-docs-highlight-shirk-none.png"></p>
<h3 id="代碼換行"><a href="#代碼換行" class="headerlink" title="代碼換行"></a>代碼換行</h3><p>在默認情況下，Hexo 在編譯的時候不會實現代碼自動換行。如果你不希望在代碼塊的區域裏有橫向滾動條的話，那麼你可以考慮開啟這個功能。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">code_word_wrap:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p>如果你是使用 highlight 渲染，需要找到你站點的 Hexo 配置文件<code>_config.yml</code>，將<code>line_number</code>改成<code>false</code>:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">false</span> <span class="comment"># &lt;- 改這裏</span></span><br><span class="line">  <span class="attr">auto_detect:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">tab_replace:</span></span><br></pre></td></tr></table></figure>

<p>如果你是使用 prismjs 渲染，需要找到你站點的 Hexo 配置文件<code>_config.yml</code>，將<code>line_number</code>改成<code>false</code>:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">prismjs:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">preprocess:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">false</span> <span class="comment"># &lt;- 改這裏</span></span><br><span class="line">  <span class="attr">tab_replace:</span> <span class="string">&#x27;&#x27;</span></span><br></pre></td></tr></table></figure>

<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>設置<code>code_word_wrap</code>之前</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-code-word-wrap-before.png" alt="hexo-theme-butterfly-doc-code-word-wrap-before.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>設置<code>code_word_wrap</code>之後</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-code-word-wrap-after.png" alt="hexo-theme-butterfly-doc-code-word-wrap-after.png"></p>
<h3 id="代碼高度限制"><a href="#代碼高度限制" class="headerlink" title="代碼高度限制"></a>代碼高度限制</h3><div class="note pink icon-padding flat"><i class="note-icon fa-solid fa-bell"></i><p>3.7.0 及以上支持</p>
</div>

<p>可配置代碼高度限制，超出的部分會隱藏，並顯示展開按鈕。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight_height_limit:</span> <span class="literal">false</span> <span class="comment"># unit: px</span></span><br></pre></td></tr></table></figure>

<p>注意：</p>
<ol>
<li><p>單位是 <code>px</code>，直接添加數字，如 200</p>
</li>
<li><p>實際限制高度為 <code>highlight_height_limit + 30 px</code> ，多增加 30px 限制，目的是避免代碼高度只超出 highlight_height_limit 一點時，出現展開按鈕，展開沒內容。</p>
</li>
<li><p>不適用於隱藏後的代碼塊（ css 設置 display: none）</p>
</li>
</ol>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-highlight-heigh-limit.gif"></p>
<h2 id="社交圖標"><a href="#社交圖標" class="headerlink" title="社交圖標"></a>社交圖標</h2><p>Butterfly 支持 <a target="_blank" rel="noopener" href="https://fontawesome.com/icons?from=io">font-awesome v6</a> 圖標.</p>
<p>書寫格式 <code>圖標名：url || 描述性文字 || color</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">social:</span></span><br><span class="line">  <span class="attr">fab fa-github:</span> <span class="string">https://github.com/xxxxx</span> <span class="string">||</span> <span class="string">Github</span> <span class="string">||</span> <span class="string">&quot;#hdhfbb&quot;</span></span><br><span class="line">  <span class="attr">fas fa-envelope:</span> <span class="string">mailto:xxxxxx@gmail.com</span> <span class="string">||</span> <span class="string">Email</span> <span class="string">||</span> <span class="string">&quot;#000000&quot;</span></span><br></pre></td></tr></table></figure>

<p>圖標名可在這尋找</p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-fontawesome.png" alt="hexo-theme-butterfly-doc-fontawesome.png"></p>
<p>PC:</p>
<p>!<img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-fontawesome.png" alt="hexo-theme-butterfly-doc-fontawesome.png"></p>
<p>Mobile:</p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-socila-icon-mobile.png" alt="hexo-theme-butterfly-doc-socila-icon-mobile.png"></p>
<h2 id="圖片設置"><a href="#圖片設置" class="headerlink" title="圖片設置"></a>圖片設置</h2><h3 id="頭像"><a href="#頭像" class="headerlink" title="頭像"></a>頭像</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">avatar:</span></span><br><span class="line">  <span class="attr">img:</span> <span class="string">/img/avatar.png</span></span><br><span class="line">  <span class="attr">effect:</span> <span class="literal">true</span> <span class="comment"># 頭像會一直轉圈</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-avatar.png" alt="hexo-theme-butterfly-doc-avatar.png"></p>
<h3 id="頂部圖"><a href="#頂部圖" class="headerlink" title="頂部圖"></a>頂部圖</h3><div class="note info flat"><p>如果不要顯示頂部圖，可直接配置 <code>disable_top_img: true</code></p>
</div>

<div class="note primary flat"><p>頂部圖的獲取順序，如果都沒有配置，則不顯示頂部圖。</p>
<ol>
<li><p>頁面頂部圖的獲取順序：</p>
<p><code>各自配置的 top_img</code> &gt; <code>配置文件的 default_top_img</code></p>
</li>
<li><p>文章頁頂部圖的獲取順序：</p>
<p><code>各自配置的 top_img</code> &gt; <code>cover</code> &gt; <code>配置文件的 default_top_img</code></p>
</li>
</ol>
</div>

<p>配置中的值：</p>
<table>
<thead>
<tr>
<th>配置</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>index_img</td>
<td>主頁的 top_img</td>
</tr>
<tr>
<td>default_top_img</td>
<td>默認的 top_img，當頁面的 top_img 沒有配置時，會顯示 default_top_img</td>
</tr>
<tr>
<td>archive_img</td>
<td>歸檔頁面的 top_img</td>
</tr>
<tr>
<td>tag_img</td>
<td>tag 子頁面 的 默認 top_img</td>
</tr>
<tr>
<td>tag_per_img</td>
<td>tag 子頁面的 top_img，可配置每個 tag 的 top_img</td>
</tr>
<tr>
<td>category_img</td>
<td>category 子頁面 的 默認 top_img</td>
</tr>
<tr>
<td>category_per_img</td>
<td>category 子頁面的 top_img，可配置每個 category 的 top_img</td>
</tr>
</tbody></table>
<p>其它頁面 （tags&#x2F;categories&#x2F;自建頁面）和 文章頁 的 <code>top_img</code> ，請到對應的 md 頁面設置<code>front-matter</code>中的<code>top_img</code></p>
<p>以上所有的 top_img 可配置以下值</p>
<table>
<thead>
<tr>
<th>配置的值</th>
<th>效果</th>
</tr>
</thead>
<tbody><tr>
<td>留空</td>
<td>顯示默認的 top_img（如有），否則顯示默認的顔色<br>（文章頁 top_img 留空的話，會顯示 cover 的值）</td>
</tr>
<tr>
<td>img 鏈接</td>
<td>圖片的鏈接，顯示所配置的圖片</td>
</tr>
<tr>
<td>顔色(<br>HEX 值 - #0000FF<br>RGB 值 - rgb(0,0,255)<br>顔色單詞 - orange<br>漸變色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%)<br>）</td>
<td>對應的顔色</td>
</tr>
<tr>
<td>transparent</td>
<td>透明</td>
</tr>
<tr>
<td>false</td>
<td>不顯示 top_img</td>
</tr>
</tbody></table>
<p><code>tag_per_img</code> 和 <code>category_per_img</code> 是 3.2.0 新增的內容，可對 tag 和 category 進行單獨的配置</p>
<p>並不推薦為每個 tag 和每個 category 都配置不同的頂部圖，因為配置太多會拖慢生成速度</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">tag_per_img:</span></span><br><span class="line">  <span class="attr">aplayer:</span> <span class="string">https://xxxxxx.png</span></span><br><span class="line">  <span class="attr">android:</span> <span class="string">ddddddd.png</span></span><br><span class="line"></span><br><span class="line"><span class="string">category_per_img：</span></span><br><span class="line">  <span class="string">隨想:</span> <span class="string">hdhdh.png</span></span><br><span class="line">  <span class="string">推薦:</span> <span class="string">ddjdjdjd.png</span></span><br></pre></td></tr></table></figure>

<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>top_img: false</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/theme-butterfly-docs-page-top-img-false.png" alt="theme-butterfly-docs-page-top-img-false.png"></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/theme-butterfly-docs-post-top-img-false-new.png" alt="theme-butterfly-docs-post-top-img-false-new.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>top_img: orange</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/theme-butterfly-docs-top-img-orange.png" alt="theme-butterfly-docs-top-img-orange.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>top_img: ‘linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)’</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/theme-butterfly-docs-top-img-color.png" alt="theme-butterfly-docs-top-img-color.png"></p>
<h3 id="頁腳背景圖"><a href="#頁腳背景圖" class="headerlink" title="頁腳背景圖"></a>頁腳背景圖</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># footer是否顯示圖片背景(與top_img一致)</span></span><br><span class="line"><span class="attr">footer_img:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>配置的值</th>
<th>效果</th>
</tr>
</thead>
<tbody><tr>
<td>留空&#x2F;false</td>
<td>顯示默認的顔色</td>
</tr>
<tr>
<td>img 鏈接</td>
<td>圖片的鏈接，顯示所配置的圖片</td>
</tr>
<tr>
<td>顔色(<br>HEX 值 - #0000FF<br>RGB 值 - rgb(0,0,255)<br>顔色單詞 - orange<br>漸變色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%)<br>）</td>
<td>對應的顔色</td>
</tr>
<tr>
<td>transparent</td>
<td>透明</td>
</tr>
<tr>
<td>true</td>
<td>顯示跟 top_img 一樣</td>
</tr>
</tbody></table>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>true</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-footer.png"></p>
<h3 id="網站背景"><a href="#網站背景" class="headerlink" title="網站背景"></a>網站背景</h3><p>默認顯示白色，可設置圖片或者顏色</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 圖片格式 url(http://xxxxxx.com/xxx.jpg)</span></span><br><span class="line"><span class="comment"># 顏色（HEX值/RGB值/顔色單詞/漸變色)</span></span><br><span class="line"><span class="comment"># 留空 不顯示背景</span></span><br><span class="line"><span class="attr">background:</span></span><br></pre></td></tr></table></figure>

<p><em>留意:</em> 如果你的網站根目錄不是’&#x2F;‘,使用本地圖片時，需加上你的根目錄。<br>例如：網站是 <code>https://yoursite.com/blog</code>,引用一張<code>img/xx.png</code>圖片，則設置 background 為 &#96;url(&#x2F;blog&#x2F;img&#x2F;xx.png)</p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>background:’#49B202’</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-set-body-background-color.png" alt="hexo-theme-butterfly-doc-set-body-background-color.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>background: url(<a target="_blank" rel="noopener" href="https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png">https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png</a>)</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-set-body-background-img.png" alt="hexo-theme-butterfly-doc-set-body-background-img.png"></p>
<h2 id="文章封面"><a href="#文章封面" class="headerlink" title="文章封面"></a>文章封面</h2><p>文章的 markdown 文檔上,在 <code>Front-matter</code> 添加 <code>cover</code> ,並填上要顯示的圖片地址。</p>
<p>如果不配置 <code>cover</code>,可以設置顯示默認的 cover。</p>
<p>如果不想在首頁顯示 cover, 可以設置為 <code>false</code>。</p>
<div class="note info flat"><p>文章封面的獲取順序 <code>Front-matter 的 cover</code> &gt; <code>配置文件的 default_cover</code> &gt; <code>false</code></p>
</div>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">cover:</span></span><br><span class="line">  <span class="comment"># 是否顯示文章封面</span></span><br><span class="line">  <span class="attr">index_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">aside_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">archives_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">default_cover:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>index_enable</td>
<td>主頁是否顯示文章封面圖</td>
</tr>
<tr>
<td>aside_enable</td>
<td>側欄是否顯示文章封面圖</td>
</tr>
<tr>
<td>archives_enable</td>
<td>歸檔頁面是否顯示文章封面圖</td>
</tr>
<tr>
<td>default_cover</td>
<td>默認的 cover, 可配置圖片鏈接&#x2F;顔色&#x2F;漸變色等</td>
</tr>
</tbody></table>
<p>當配置多張圖片時,會隨機選擇一張作為 cover.此時寫法應為</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">default_cover:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">https://jsd.012700.xyz/gh/jerryc127/CDN@latest/cover/default_bg.png</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">https://jsd.012700.xyz/gh/jerryc127/CDN@latest/cover/default_bg2.png</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">https://jsd.012700.xyz/gh/jerryc127/CDN@latest/cover/default_bg3.png</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-cover.png" alt="hexo-theme-butterfly-doc-post-cover.png"></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-cover-show.png" alt="hexo-theme-butterfly-doc-post-cover-show.png"></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-cover-false.png" alt="hexo-theme-butterfly-docs-cover-false.png"></p>
<h2 id="頁面-meta-顯示"><a href="#頁面-meta-顯示" class="headerlink" title="頁面 meta 顯示"></a>頁面 meta 顯示</h2><p>這個選項是用來顯示文章的相關信息的。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">post_meta:</span></span><br><span class="line">  <span class="comment"># Home Page</span></span><br><span class="line">  <span class="attr">page:</span></span><br><span class="line">    <span class="comment"># Choose: created / updated / both</span></span><br><span class="line">    <span class="attr">date_type:</span> <span class="string">created</span></span><br><span class="line">    <span class="comment"># Choose: date / relative</span></span><br><span class="line">    <span class="attr">date_format:</span> <span class="string">date</span></span><br><span class="line">    <span class="attr">categories:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">label:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">post:</span></span><br><span class="line">    <span class="comment"># Choose: left / center</span></span><br><span class="line">    <span class="attr">position:</span> <span class="string">left</span></span><br><span class="line">    <span class="comment"># Choose: created / updated / both</span></span><br><span class="line">    <span class="attr">date_type:</span> <span class="string">both</span></span><br><span class="line">    <span class="comment"># Choose: date / relative</span></span><br><span class="line">    <span class="attr">date_format:</span> <span class="string">date</span></span><br><span class="line">    <span class="attr">categories:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">label:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p>主頁：</p>
<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>date_type</td>
<td>顯示文章的時間，可選 created &#x2F; updated &#x2F; both</td>
</tr>
<tr>
<td>date_format</td>
<td>配置時間顯示明確時間還是相對時間，可選 date &#x2F; relative</td>
</tr>
<tr>
<td>categories</td>
<td>是否顯示文章的分類</td>
</tr>
<tr>
<td>tags</td>
<td>是否顯示文章的標籤</td>
</tr>
<tr>
<td>label</td>
<td>是否顯示文字標簽</td>
</tr>
</tbody></table>
<p>文章頁：</p>
<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>position</td>
<td>文章頁 meta 顯示的位置，可選 left &#x2F; center</td>
</tr>
<tr>
<td>date_type</td>
<td>顯示文章的時間，可選 created &#x2F; updated &#x2F; both</td>
</tr>
<tr>
<td>date_format</td>
<td>配置時間顯示明確時間還是相對時間，可選 date &#x2F; relative</td>
</tr>
<tr>
<td>categories</td>
<td>是否顯示文章的分類</td>
</tr>
<tr>
<td>tags</td>
<td>是否顯示文章的標籤</td>
</tr>
<tr>
<td>label</td>
<td>是否顯示文字標簽</td>
</tr>
</tbody></table>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>主頁</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-page-meta.png" alt="hexo-theme-butterfly-docs-page-meta.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>文章頁</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-info.png" alt="hexo-theme-butterfly-doc-post-info.png"></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-tag.png" alt="hexo-theme-butterfly-doc-post-tag.png"></p>
<p><code>date_format</code> 是 3.2.0 新增的內容，配置時間顯示明確時間還是相對時間</p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>相對時間</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/theme-butterfly-docs-relative-time.png" alt="theme-butterfly-docs-relative-time.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>明確時間</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/theme-butterfly-docs-full-date.png" alt="theme-butterfly-docs-full-date.png"></p>
<h2 id="首頁"><a href="#首頁" class="headerlink" title="首頁"></a>首頁</h2><h3 id="首頁頂部圖大小"><a href="#首頁頂部圖大小" class="headerlink" title="首頁頂部圖大小"></a>首頁頂部圖大小</h3><p>默認的顯示為全屏，網站信息會居中顯示</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 主頁設置</span></span><br><span class="line"><span class="comment"># 默認top_img全屏，site_info在中間</span></span><br><span class="line"><span class="comment"># 使用默認, 都無需填寫（建議默認）</span></span><br><span class="line"><span class="attr">index_site_info_top:</span> <span class="comment"># 主頁標題距離頂部距離  例如 300px/300em/300rem/10%</span></span><br><span class="line"><span class="attr">index_top_img_height:</span> <span class="comment">#主頁top_img高度 例如 300px/300em/300rem  不能使用百分比</span></span><br></pre></td></tr></table></figure>

<p>注意：<code>index_top_img_height</code>的值不能使用百分比。<br>2 個都不填的話，會使用默認值</p>
<p>舉例，當</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">index_top_img_height:</span> <span class="string">400px</span></span><br></pre></td></tr></table></figure>

<p>效果</p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-index-top-img-setting.png" alt="hexo-theme-butterfly-doc-index-top-img-setting.png"></p>
<h3 id="網站副標題"><a href="#網站副標題" class="headerlink" title="網站副標題"></a>網站副標題</h3><p>可設置主頁中顯示的網站副標題或者喜歡的座右銘。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 主頁subtitle</span></span><br><span class="line"><span class="attr">subtitle:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Typewriter Effect (打字效果)</span></span><br><span class="line">  <span class="attr">effect:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Customize typed.js</span></span><br><span class="line">  <span class="comment"># https://github.com/mattboldt/typed.js/#customization</span></span><br><span class="line">  <span class="attr">typed_option:</span></span><br><span class="line">  <span class="comment"># source 調用第三方服務</span></span><br><span class="line">  <span class="comment"># false 關閉調用</span></span><br><span class="line">  <span class="comment"># 1  調用一言網的一句話（簡體） https://hitokoto.cn/</span></span><br><span class="line">  <span class="comment"># 2  調用一句網（簡體） http://yijuzhan.com/</span></span><br><span class="line">  <span class="comment"># 3  調用今日詩詞（簡體） https://www.jinrishici.com/</span></span><br><span class="line">  <span class="comment"># subtitle 會先顯示 source , 再顯示 sub 的內容</span></span><br><span class="line">  <span class="attr">source:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字</span></span><br><span class="line">  <span class="attr">sub:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">今日事&amp;#44;今日畢</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">Never</span> <span class="string">put</span> <span class="string">off</span> <span class="string">till</span> <span class="string">tomorrow</span> <span class="string">what</span> <span class="string">you</span> <span class="string">can</span> <span class="string">do</span> <span class="string">today</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-index-subtitle.gif" alt="hexo-theme-butterfly-doc-index-subtitle.gif"></p>
<h3 id="首頁卡片佈局"><a href="#首頁卡片佈局" class="headerlink" title="首頁卡片佈局"></a>首頁卡片佈局</h3><p>主題文章卡片支持 7 種佈局</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">index_layout:</span> <span class="number">3</span></span><br></pre></td></tr></table></figure>

<p>配置解釋：</p>
<table>
<thead>
<tr>
<th>配置值</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>1</td>
<td>封面在左，信息在右</td>
</tr>
<tr>
<td>2</td>
<td>封面在右，信息在左</td>
</tr>
<tr>
<td>3</td>
<td>封面和信息左右交替顯示</td>
</tr>
<tr>
<td>4</td>
<td>封面在上，信息在下</td>
</tr>
<tr>
<td>5</td>
<td>信息顯示在封面上</td>
</tr>
<tr>
<td>6</td>
<td>瀑布流布局 - 封面在上，信息在下</td>
</tr>
<tr>
<td>7</td>
<td>瀑布流布局 - 信息顯示在封面上</td>
</tr>
</tbody></table>
<p>填寫<code>數字序號</code>即可，默認為 3</p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>1: 封面在左，信息在右</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/10/butterfly-docs-index-layout-1.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>2: 封面在右，信息在左</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/10/butterfly-docs-index-layout-2.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>3: 封面和信息左右交替显示</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/10/butterfly-docs-index-layout-3.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>4: 封面在上，信息在下</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/10/butterfly-docs-index-layout-4.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>5: 信息显示在封面上</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/10/butterfly-docs-index-layout-5.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>6: 瀑布流布局 - 封面在上，信息在下</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/10/butterfy-docs-index-layout-6.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>7: 瀑布流布局 - 信息显示在封面上</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/10/butterfly-docs-index-layout-7.png"></p>
<h3 id="主頁文章節選"><a href="#主頁文章節選" class="headerlink" title="主頁文章節選"></a>主頁文章節選</h3><p>因為主題 UI 的關係，<code>主頁文章節選</code>只支持<code>自動節選</code>和<code>文章頁description</code>。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Display the article introduction on homepage</span></span><br><span class="line"><span class="comment"># 1: description</span></span><br><span class="line"><span class="comment"># 2: both (if the description exists, it will show description, or show the auto_excerpt)</span></span><br><span class="line"><span class="comment"># 3: auto_excerpt (default)</span></span><br><span class="line"><span class="comment"># false: do not show the article introduction</span></span><br><span class="line"><span class="attr">index_post_content:</span></span><br><span class="line">  <span class="attr">method:</span> <span class="number">3</span></span><br><span class="line">  <span class="comment"># If you set method to 2 or 3, the length need to config</span></span><br><span class="line">  <span class="attr">length:</span> <span class="number">500</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>method</td>
<td>顯示文章內容的方式，有四種可供選擇 <br> 1 - 只顯示 description <br> 2 - 優先選擇 description，如果沒有配置 description，則顯示自動節選的內容 <br> 3 - 只顯示自動節選 <br> 4 - 不顯示文章內容</td>
</tr>
<tr>
<td>length</td>
<td>自動節選的長度，只有在 method 為 2 或者 3 的時候才需要配置 length</td>
</tr>
</tbody></table>
<p><code>description</code>在 front-matter 裏添加</p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-description.png" alt="hexo-theme-butterfly-doc-post-description.png"></p>
<h2 id="文章頁"><a href="#文章頁" class="headerlink" title="文章頁"></a>文章頁</h2><h3 id="TOC-目錄"><a href="#TOC-目錄" class="headerlink" title="TOC 目錄"></a>TOC 目錄</h3><p>在側邊欄顯示 TOC（文章目錄）</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">toc:</span></span><br><span class="line">  <span class="attr">post:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">page:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">expand:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Only for post</span></span><br><span class="line">  <span class="attr">style_simple:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">scroll_percent:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>屬性</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>post</td>
<td>文章頁是否顯示 TOC</td>
</tr>
<tr>
<td>page</td>
<td>普通頁面是否顯示 TOC</td>
</tr>
<tr>
<td>number</td>
<td>是否顯示章節數</td>
</tr>
<tr>
<td>expand</td>
<td>是否展開 TOC</td>
</tr>
<tr>
<td>style_simple</td>
<td>簡潔模式（側邊欄<strong>只</strong>顯示 TOC, 只對文章頁有效 ）</td>
</tr>
<tr>
<td>scroll_percent</td>
<td>是否顯示滾動進度百分比</td>
</tr>
</tbody></table>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Toc PC</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-toc-pc.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Toc Mobile</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-mobile.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>style_simple: true</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-toc-simple.png"></p>
<h4 id="為特定的文章配置"><a href="#為特定的文章配置" class="headerlink" title="為特定的文章配置"></a>為特定的文章配置</h4><p>在你的文章<code>md</code>文件的頭部，加入<code>toc_number</code>和<code>toc</code>，並配置<code>true</code>或者<code>false</code>即可。</p>
<p>主題會優先判斷文章 Markdown 的 Front-matter 是否有配置，如有，則以 Front-matter 的配置為準。否則，以<strong>主題配置文件中</strong>的配置為準。</p>
<h3 id="文章版權"><a href="#文章版權" class="headerlink" title="文章版權"></a>文章版權</h3><p>為你的博客文章展示文章版權和許可協議。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">post_copyright:</span></span><br><span class="line">  <span class="comment"># 是否啟用版權聲明</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 是否進行文章 URL 解碼</span></span><br><span class="line">  <span class="attr">decode:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 作者鏈接</span></span><br><span class="line">  <span class="attr">author_href:</span></span><br><span class="line">  <span class="comment"># 許可證類型</span></span><br><span class="line">  <span class="attr">license:</span> <span class="string">CC</span> <span class="string">BY-NC-SA</span> <span class="number">4.0</span></span><br><span class="line">  <span class="comment"># 許可證鏈接</span></span><br><span class="line">  <span class="attr">license_url:</span> <span class="string">https://creativecommons.org/licenses/by-nc-sa/4.0/</span></span><br></pre></td></tr></table></figure>

<p>由於<code>Hexo 4.1</code>開始，默認對網址進行解碼，以至於如果是中文網址，會被解碼，可設置<code>decode: true</code>來顯示中文網址。</p>
<p>如果有文章（例如：轉載文章）不需要顯示版權，可以在文章 Front-matter 單獨設置</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">copyright:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<p>從<code>3.0.0</code>開始，支持對單獨文章設置版權信息，可以在文章 Front-matter 單獨設置</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">copyright<span class="emphasis">_author: xxxx</span></span><br><span class="line"><span class="emphasis">copyright_</span>author<span class="emphasis">_href: https://xxxxxx.com</span></span><br><span class="line"><span class="emphasis">copyright_</span>url: https://xxxxxx.com</span><br><span class="line">copyright<span class="emphasis">_info: 此文章版權歸 xxxxx 所有，如有轉載，請註明來自原作者</span></span><br></pre></td></tr></table></figure>

<p><strong>版權顯示截圖</strong></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-copyright.png"></p>
<h3 id="文章打賞-贊助"><a href="#文章打賞-贊助" class="headerlink" title="文章打賞&#x2F;贊助"></a>文章打賞&#x2F;贊助</h3><p>在你每篇文章的結尾，可以添加贊助按鈕。相關二維碼可以自行配置。</p>
<p>對於沒有提供二維碼的，可配置一張軟件的 icon 圖片，然後在 link 上添加相應的贊助鏈接。用户點擊圖片就會跳轉到鏈接去。</p>
<p>link 可以不寫，會默認為圖片的鏈接。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">reward:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">text:</span></span><br><span class="line">  <span class="attr">QR_code:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">img:</span> <span class="string">/img/wechat.jpg</span></span><br><span class="line">      <span class="attr">link:</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">微信</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">img:</span> <span class="string">/img/alipay.jpg</span></span><br><span class="line">      <span class="attr">link:</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">支付寶</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-donate.png"></p>
<h3 id="文章編輯按鈕"><a href="#文章編輯按鈕" class="headerlink" title="文章編輯按鈕"></a>文章編輯按鈕</h3><p>在文章標題旁邊顯示一個編輯按鈕，點擊會跳轉到對應的鏈接去。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Post edit</span></span><br><span class="line"><span class="comment"># Easily browse and edit blog source code online.</span></span><br><span class="line"><span class="attr">post_edit:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/</span></span><br><span class="line">  <span class="comment"># For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/</span></span><br><span class="line">  <span class="attr">url:</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-post-edit.png" alt="hexo-theme-butterfly-docs-post-edit.png"></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-post-edit-2.png" alt="hexo-theme-butterfly-docs-post-edit-2.png"></p>
<h3 id="相關文章"><a href="#相關文章" class="headerlink" title="相關文章"></a>相關文章</h3><div class="note warning flat"><p>當文章封面設置為 false 時，或者沒有獲取到封面配置，相關文章背景將會顯示主題色。</p>
</div>

<p>相關文章推薦的原理是根據文章 tags 的比重來推薦</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">related_post:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">limit:</span> <span class="number">6</span> <span class="comment"># 顯示推薦文章數目</span></span><br><span class="line">  <span class="attr">date_type:</span> <span class="string">created</span> <span class="comment"># or created or updated 文章日期顯示創建日或者更新日</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-releatedpost.png"></p>
<h3 id="文章分頁按鈕"><a href="#文章分頁按鈕" class="headerlink" title="文章分頁按鈕"></a>文章分頁按鈕</h3><div class="note warning flat"><p>當文章封面設置為 false 時，或者沒有獲取到封面配置，分頁背景將會顯示主題色。</p>
</div>

<p>可設置分頁的邏輯，也可以關閉分頁顯示</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># post_pagination (分頁)</span></span><br><span class="line"><span class="comment"># value: 1 || 2 || false</span></span><br><span class="line"><span class="comment"># 1: The &#x27;next post&#x27; will link to old post</span></span><br><span class="line"><span class="comment"># 2: The &#x27;next post&#x27; will link to new post</span></span><br><span class="line"><span class="comment"># false: disable pagination</span></span><br><span class="line"><span class="attr">post_pagination:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>post_pagination: false</td>
<td>關閉分頁按鈕</td>
</tr>
<tr>
<td>post_pagination: 1</td>
<td>下一篇顯示的是舊文章</td>
</tr>
<tr>
<td>post_pagination: 2</td>
<td>下一篇顯示的是新文章</td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-post-pagination.png"></p>
<h3 id="文章過期提醒"><a href="#文章過期提醒" class="headerlink" title="文章過期提醒"></a>文章過期提醒</h3><p>可設置是否顯示文章過期提醒，以更新時間為基準。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Displays outdated notice for a post</span></span><br><span class="line"><span class="attr">noticeOutdate:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Style: simple / flat</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">flat</span></span><br><span class="line">  <span class="comment"># When will it be shown</span></span><br><span class="line">  <span class="attr">limit_day:</span> <span class="number">365</span></span><br><span class="line">  <span class="comment"># Position: top / bottom</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">top</span></span><br><span class="line">  <span class="attr">message_prev:</span> <span class="string">It</span> <span class="string">has</span> <span class="string">been</span></span><br><span class="line">  <span class="attr">message_next:</span> <span class="string">days</span> <span class="string">since</span> <span class="string">the</span> <span class="string">last</span> <span class="string">update,</span> <span class="string">the</span> <span class="string">content</span> <span class="string">of</span> <span class="string">the</span> <span class="string">article</span> <span class="string">may</span> <span class="string">be</span> <span class="string">outdated.</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>配置</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>enable</td>
<td>是否開啟文章過期提醒</td>
</tr>
<tr>
<td>style</td>
<td>提醒樣式, simple &#x2F; flat</td>
</tr>
<tr>
<td>limit_day</td>
<td>設置多少天後提醒，默認 365 天</td>
</tr>
<tr>
<td>position</td>
<td>提醒位置 top &#x2F; bottom</td>
</tr>
<tr>
<td>message_prev</td>
<td>提示文字</td>
</tr>
<tr>
<td>message_next</td>
<td>提示文字</td>
</tr>
</tbody></table>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>style: flat</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butteffly-docs-outdate-flat.png" alt="hexo-theme-butteffly-docs-outdate-flat.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>style: simple</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-outdated-simple.png" alt="hexo-theme-butterfly-docs-outdated-simple.png"></p>
<h2 id="頁腳"><a href="#頁腳" class="headerlink" title="頁腳"></a>頁腳</h2><h3 id="博客年份"><a href="#博客年份" class="headerlink" title="博客年份"></a>博客年份</h3><p><code>since</code>是一個來展示你站點起始時間的選項。它位於頁面的最底部。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">footer:</span></span><br><span class="line">  <span class="attr">owner:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">since:</span> <span class="number">2018</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-since.png" alt="hexo-theme-butterfly-doc-since.png"></p>
<h3 id="頁腳自定義文本"><a href="#頁腳自定義文本" class="headerlink" title="頁腳自定義文本"></a>頁腳自定義文本</h3><p><code>custom_text</code>是一個給你用來在頁腳自定義文本的選項。通常你可以在這裏寫聲明文本等,支持 HTML。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">custom_text:</span> <span class="string">Hi,</span> <span class="string">welcome</span> <span class="string">to</span> <span class="string">my</span> <span class="string">&lt;a</span> <span class="string">href=&quot;https://butterfly.js.org/&quot;&gt;blog&lt;/a&gt;!</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-footer-text.png" alt="hexo-theme-butterfly-doc-footer-text.png"></p>
<p>對於部分人需要寫 ICP 的，也可以寫在 <code>custom_text</code>裏</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">custom_text:</span> <span class="string">&lt;a</span> <span class="string">href=&quot;icp鏈接&quot;&gt;&lt;img</span> <span class="string">class=&quot;icp-icon&quot;</span> <span class="string">src=&quot;icp圖片&quot;&gt;&lt;span&gt;備案號：xxxxxx&lt;/span&gt;&lt;/a&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="Aside"><a href="#Aside" class="headerlink" title="Aside"></a>Aside</h2><h3 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h3><p>側邊欄的配置</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">aside:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hide:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Show the button to hide the aside in bottom right button</span></span><br><span class="line">  <span class="attr">button:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Position: left / right</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">right</span></span><br><span class="line">  <span class="attr">display:</span></span><br><span class="line">    <span class="attr">archive:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">tag:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">category:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">card_author:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">description:</span></span><br><span class="line">    <span class="attr">button:</span></span><br><span class="line">      <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-github</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">Follow</span> <span class="string">Me</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://github.com/xxxxxx</span></span><br><span class="line">  <span class="attr">card_announcement:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">content:</span> <span class="string">This</span> <span class="string">is</span> <span class="string">my</span> <span class="string">Blog</span></span><br><span class="line">  <span class="attr">card_recent_post:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># If set 0 will show all</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">5</span></span><br><span class="line">    <span class="comment"># Sort: date / updated</span></span><br><span class="line">    <span class="attr">sort:</span> <span class="string">date</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_newest_comments:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">6</span></span><br><span class="line">    <span class="comment"># Unit: mins, save data to localStorage</span></span><br><span class="line">    <span class="attr">storage:</span> <span class="number">10</span></span><br><span class="line">    <span class="attr">avatar:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">card_categories:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># If set 0 will show all</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">8</span></span><br><span class="line">    <span class="comment"># Choose: none / true / false</span></span><br><span class="line">    <span class="attr">expand:</span> <span class="string">none</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_tags:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># If set 0 will show all</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">40</span></span><br><span class="line">    <span class="attr">color:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># Order of tags, random/name/length</span></span><br><span class="line">    <span class="attr">orderby:</span> <span class="string">random</span></span><br><span class="line">    <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">1</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_archives:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># Type: monthly / yearly</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">monthly</span></span><br><span class="line">    <span class="comment"># Eg: YYYY年MM月</span></span><br><span class="line">    <span class="attr">format:</span> <span class="string">MMMM</span> <span class="string">YYYY</span></span><br><span class="line">    <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line">    <span class="comment"># If set 0 will show all</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">8</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_post_series:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># The title shows the series name</span></span><br><span class="line">    <span class="attr">series_title:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># Order by title or date</span></span><br><span class="line">    <span class="attr">orderBy:</span> <span class="string">&#x27;date&#x27;</span></span><br><span class="line">    <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line">  <span class="attr">card_webinfo:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">post_count:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">last_push_date:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">    <span class="comment"># Time difference between publish date and now</span></span><br><span class="line">    <span class="comment"># Formal: Month/Day/Year Time or Year/Month/Day Time</span></span><br><span class="line">    <span class="comment"># Leave it empty if you don&#x27;t enable this feature</span></span><br><span class="line">    <span class="attr">runtime_date:</span></span><br></pre></td></tr></table></figure>

<div class="note info flat"><p><code>sort_order</code> 是給每個卡片配置的排序，如果不配置，則按照主題配置文件的排序。數字越小，越靠前。</p>
</div>

<table>
<thead>
<tr>
<th>配置</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>enable</td>
<td>是否啟用側邊欄</td>
</tr>
<tr>
<td>hide</td>
<td>是否默認隱藏側邊欄</td>
</tr>
<tr>
<td>button</td>
<td>是否顯示隱藏側邊欄的按鈕</td>
</tr>
<tr>
<td>mobile</td>
<td>是否在移動端顯示側邊欄</td>
</tr>
<tr>
<td>position</td>
<td>側邊欄位置，left &#x2F; right</td>
</tr>
<tr>
<td>display.archive</td>
<td>archive 頁面是否顯示 aside</td>
</tr>
<tr>
<td>display.tag</td>
<td>tag 頁面是否顯示 aside</td>
</tr>
<tr>
<td>display.category</td>
<td>category 頁面是否顯示 aside</td>
</tr>
<tr>
<td>card_author.enable</td>
<td>是否顯示作者卡片</td>
</tr>
<tr>
<td>card_author.description</td>
<td>作者描述信息</td>
</tr>
<tr>
<td>card_author.button.enable</td>
<td>是否顯示按鈕</td>
</tr>
<tr>
<td>card_author.button.icon</td>
<td>按鈕圖標，可在這裏找到圖標名稱：<a target="_blank" rel="noopener" href="https://fontawesome.com/icons?d=gallery&m=free">https://fontawesome.com/icons?d=gallery&amp;m=free</a></td>
</tr>
<tr>
<td>card_author.button.text</td>
<td>按鈕文字</td>
</tr>
<tr>
<td>card_author.button.link</td>
<td>按鈕鏈接</td>
</tr>
<tr>
<td>card_announcement.enable</td>
<td>是否顯示公告卡片</td>
</tr>
<tr>
<td>card_announcement.content</td>
<td>公告內容 （可使用 html 標簽）</td>
</tr>
<tr>
<td>card_recent_post.enable</td>
<td>是否顯示最新文章卡片</td>
</tr>
<tr>
<td>card_recent_post.limit</td>
<td>顯示文章數目，0 為全部</td>
</tr>
<tr>
<td>card_recent_post.sort</td>
<td>排序方式，date &#x2F; updated</td>
</tr>
<tr>
<td>card_newest_comments.enable</td>
<td>是否顯示最新評論卡片</td>
</tr>
<tr>
<td>card_newest_comments.limit</td>
<td>顯示評論數目，0 為全部</td>
</tr>
<tr>
<td>card_newest_comments.storage</td>
<td>保存時間，單位分鐘，保存到本地存儲，避免每次刷新都重新請求數據</td>
</tr>
<tr>
<td>card_newest_comments.avatar</td>
<td>是否顯示頭像</td>
</tr>
<tr>
<td>card_categories.enable</td>
<td>是否顯示分類卡片</td>
</tr>
<tr>
<td>card_categories.limit</td>
<td>顯示分類數目，0 為全部</td>
</tr>
<tr>
<td>card_categories.expand</td>
<td>是否展開分類，none &#x2F; true &#x2F; false</td>
</tr>
<tr>
<td>card_tags.enable</td>
<td>是否顯示標籤卡片</td>
</tr>
<tr>
<td>card_tags.limit</td>
<td>顯示標籤數目，0 為全部</td>
</tr>
<tr>
<td>card_tags.color</td>
<td>是否顯示標籤顔色</td>
</tr>
<tr>
<td>card_tags.orderby</td>
<td>標籤排序方式，random &#x2F; name &#x2F; length</td>
</tr>
<tr>
<td>card_tags.order</td>
<td>排序方式，1 為升序，-1 為降序</td>
</tr>
<tr>
<td>card_archives.enable</td>
<td>是否顯示歸檔卡片</td>
</tr>
<tr>
<td>card_archives.type</td>
<td>歸檔類型，monthly &#x2F; yearly</td>
</tr>
<tr>
<td>card_archives.format</td>
<td>歸檔顯示格式，例如：YYYY 年 MM 月</td>
</tr>
<tr>
<td>card_archives.order</td>
<td>排序方式，1 為升序，-1 為降序</td>
</tr>
<tr>
<td>card_archives.limit</td>
<td>顯示歸檔數目，0 為全部</td>
</tr>
<tr>
<td>card_post_series.enable</td>
<td>是否顯示文章系列卡片</td>
</tr>
<tr>
<td>card_post_series.series_title</td>
<td>是否顯示系列名稱</td>
</tr>
<tr>
<td>card_post_series.orderBy</td>
<td>排序方式，title &#x2F; date</td>
</tr>
<tr>
<td>card_post_series.order</td>
<td>排序方式，1 為升序，-1 為降序</td>
</tr>
<tr>
<td>card_webinfo.enable</td>
<td>是否顯示網站信息卡片</td>
</tr>
<tr>
<td>card_webinfo.post_count</td>
<td>是否顯示文章數量</td>
</tr>
<tr>
<td>card_webinfo.last_push_date</td>
<td>是否顯示最後更新日期</td>
</tr>
<tr>
<td>card_webinfo.runtime_date</td>
<td>顯示網站運行時間,不需要開啟，留空白就行（開啟格式一定要是 Month&#x2F;Day&#x2F;Year Time 或者 Year&#x2F;Month&#x2F;Day Time</td>
</tr>
</tbody></table>
<div class="note primary flat"><p>目前有三個評論 Livere、Facebook Comments 和 Giscus 不支持最新評論。</p>
<p>最新評論只會在刷新時才會去讀取，並不會實時變化</p>
<p>由於 API 有 訪問次數限制，為了避免調用太多，主題默認存取期限為 10 分鐘。也就是説，調用後資料會存在 <em>localStorage</em> 裏，10 分鐘內刷新網站只會去 <em>localStorage</em> 讀取資料。 10 分鐘期限一過，刷新頁面時才會去調取 API 讀取新的數據。（ 3.6.0 新增了 <code>storage</code> 配置，可自行配置緩存時間）</p>
</div>

<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>position: left</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-aside-left.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>position: right</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-aside-right.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>card_tags color: false</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-card-tags-color-false.png" alt="butterfly-docs-card-tags-color-false.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>card_tags color: true</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-card-tags-color-true.png" alt="butterfly-docs-card-tags-color-true.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>aside button</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-aside-button.gif"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>運行時間</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-runtime.png" alt="hexo-theme-butterfly-doc-runtime.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>最新評論</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-newest-comment.png"></p>
<h3 id="自定義添加欄目"><a href="#自定義添加欄目" class="headerlink" title="自定義添加欄目"></a>自定義添加欄目</h3><a class="btn-beautify block green" href="/posts/ea33ab97/" title="點擊前往"><i class="fas fa-lightbulb"></i><span>點擊前往</span></a>

<h2 id="右下角按鈕"><a href="#右下角按鈕" class="headerlink" title="右下角按鈕"></a>右下角按鈕</h2><h3 id="按鈕位置"><a href="#按鈕位置" class="headerlink" title="按鈕位置"></a>按鈕位置</h3><p>當開啟 chat 聊天服務後，聊天服務的按鈕可能會遮擋到右下角的按鈕，可以設置按鈕的位置。<br>非必要不建議設置，默認就行</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># The distance between the bottom right button and the bottom (default unit: px)</span></span><br><span class="line"><span class="attr">rightside_bottom:</span></span><br></pre></td></tr></table></figure>

<p>默認單位為 px，直接添加數字即可。</p>
<h3 id="簡繁轉換"><a href="#簡繁轉換" class="headerlink" title="簡繁轉換"></a>簡繁轉換</h3><p>主題內置了一個簡單的簡繁轉換功能，採用一對一的形式配對。遇到一字多繁或者一字多簡的情況下，會出現不能正常轉換正確的簡繁體，請留意。</p>
<p>開啟後，右下角會有簡繁轉換按鈕。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">translate:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 默認按鈕顯示文字(網站是簡體，應設置為&#x27;default: 繁&#x27;)</span></span><br><span class="line">  <span class="attr">default:</span> <span class="string">簡</span></span><br><span class="line">  <span class="comment">#網站默認語言，1: 繁體中文, 2: 簡體中文</span></span><br><span class="line">  <span class="attr">defaultEncoding:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment">#延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0</span></span><br><span class="line">  <span class="attr">translateDelay:</span> <span class="number">0</span></span><br><span class="line">  <span class="comment">#當文字是簡體時，按鈕顯示的文字</span></span><br><span class="line">  <span class="attr">msgToTraditionalChinese:</span> <span class="string">&#x27;繁&#x27;</span></span><br><span class="line">  <span class="comment">#當文字是繁體時，按鈕顯示的文字</span></span><br><span class="line">  <span class="attr">msgToSimplifiedChinese:</span> <span class="string">&#x27;簡&#x27;</span></span><br></pre></td></tr></table></figure>

<h3 id="閲讀模式"><a href="#閲讀模式" class="headerlink" title="閲讀模式"></a>閲讀模式</h3><p>閲讀模式下會去掉除文章外的內容，避免幹擾閲讀。</p>
<p>只會出現在文章頁面，右下角會有閲讀模式按鈕。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">readmode:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-read-mode.png"></p>
<h3 id="夜間模式"><a href="#夜間模式" class="headerlink" title="夜間模式"></a>夜間模式</h3><p>右下角會有夜間模式按鈕</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># dark mode</span></span><br><span class="line"><span class="attr">darkmode:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># dark mode和 light mode切換按鈕</span></span><br><span class="line">  <span class="attr">button:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">autoChangeMode:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18</span></span><br><span class="line">  <span class="attr">start:</span> <span class="comment"># 8</span></span><br><span class="line">  <span class="attr">end:</span> <span class="comment"># 22</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>button</td>
<td>是否在右下角顯示日夜模式切換按鈕</td>
</tr>
<tr>
<td>autoChangeMode</td>
<td>自動切換的模式<br />autoChangeMode: 1 跟隨系統而變化，不支持的瀏覽器&#x2F;系統將按照時間 start 到 end 之間切換為 light mode<br />autoChangeMode: 2 只按照時間 start 到 end 之間切換為 light mode ,其餘時間為 dark mode<br />autoChangeMode: false 取消自動切換</td>
</tr>
<tr>
<td>start</td>
<td>light mode 的開始時間</td>
</tr>
<tr>
<td>end</td>
<td>light mode 的結束時間</td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-dark-mode-1.png" alt="hexo-theme-butterfly-doc-dark-mode-1.png"></p>
<h3 id="滾動狀態百分比"><a href="#滾動狀態百分比" class="headerlink" title="滾動狀態百分比"></a>滾動狀態百分比</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># show scroll percent in scroll-to-top button</span></span><br><span class="line"><span class="attr">rightside_scroll_percent:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/hexo-butterfly-docs-scroll-percent-right-btn.gif"></p>
<h3 id="按鈕排序"><a href="#按鈕排序" class="headerlink" title="按鈕排序"></a>按鈕排序</h3><p>可對右下角按鈕進行排序</p>
<p><strong>注意：</strong> 不要重複</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Don&#x27;t modify the following settings unless you know how they work (非必要請不要修改 )</span></span><br><span class="line"><span class="comment"># Choose: readmode,translate,darkmode,hideAside,toc,chat,comment</span></span><br><span class="line"><span class="comment"># Don&#x27;t repeat 不要重複</span></span><br><span class="line"><span class="attr">rightside_item_order:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">hide:</span> <span class="comment"># readmode,translate,darkmode,hideAside</span></span><br><span class="line">  <span class="attr">show:</span> <span class="comment"># toc,chat,comment</span></span><br></pre></td></tr></table></figure>

<h2 id="全局配置"><a href="#全局配置" class="headerlink" title="全局配置"></a>全局配置</h2><h3 id="頁面錨點"><a href="#頁面錨點" class="headerlink" title="頁面錨點"></a>頁面錨點</h3><p>開啟頁面錨點後，當你在進行滾動時，頁面鏈接會根據標題 ID 進行替換<br>(注意: 每替換一次，會留下一個歷史記錄。所以如果一篇文章有很多錨點的話，網頁的歷史記錄會很多。)</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># anchor</span></span><br><span class="line"><span class="attr">anchor:</span></span><br><span class="line">  <span class="comment"># when you scroll, the URL will update according to header id.</span></span><br><span class="line">  <span class="attr">auto_update:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Click the headline to scroll and update the anchor</span></span><br><span class="line">  <span class="attr">click_to_scroll:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>配置</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>auto_update</td>
<td>當滾動時，URL 將根據標題 id 更新。默認為 <code>false</code>。</td>
</tr>
<tr>
<td>click_to_scroll</td>
<td>點擊標題滾動並更新錨點。默認為 <code>false</code>。</td>
</tr>
</tbody></table>
<h3 id="圖片描述"><a href="#圖片描述" class="headerlink" title="圖片描述"></a>圖片描述</h3><p>可開啟圖片 Figcaption 描述文字顯示</p>
<p>優先顯示圖片的 title 屬性，然後是 alt 屬性</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">photofigcaption:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-photo-figcaption.png"></p>
<h3 id="複製相關配置"><a href="#複製相關配置" class="headerlink" title="複製相關配置"></a>複製相關配置</h3><p>可配置網站是否可以複製、複製的內容是否添加版權信息</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">copy:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Add the copyright information after copied content</span></span><br><span class="line">  <span class="attr">copyright:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">limit_count:</span> <span class="number">150</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>配置</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>enable</td>
<td>是否開啟網站複製權限</td>
</tr>
<tr>
<td>copyright</td>
<td>複製的內容後面加上版權信息</td>
</tr>
<tr>
<td>enable</td>
<td>是否開啟複製版權信息添加</td>
</tr>
<tr>
<td>limit_count</td>
<td>字數限制，當複製文字大於這個字數限制時，將在複製的內容後面加上版權信息</td>
</tr>
</tbody></table>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>添加版權信息後</p>
</div>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">作者: Jerry</span><br><span class="line">連結: http://localhost:4000/posts/bd3c650b/#Paragraph</span><br><span class="line">來源: Butterfly</span><br><span class="line">著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。</span><br></pre></td></tr></table></figure>

<h3 id="字數統計"><a href="#字數統計" class="headerlink" title="字數統計"></a>字數統計</h3><p>開啟字數統計功能，需要安裝<code>hexo-wordcount</code>插件</p>
<p>在 hexo 工作目錄下運行 <code>npm install hexo-wordcount --save</code> or <code>yarn add hexo-wordcount</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Need to install the hexo-wordcount plugin</span></span><br><span class="line"><span class="attr">wordcount:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Display the word count of the article in post meta</span></span><br><span class="line">  <span class="attr">post_wordcount:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Display the time to read the article in post meta</span></span><br><span class="line">  <span class="attr">min2read:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Display the total word count of the website in aside&#x27;s webinfo</span></span><br><span class="line">  <span class="attr">total_wordcount:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>post_wordcount</td>
<td>在文章頁面顯示字數</td>
</tr>
<tr>
<td>min2read</td>
<td>在文章頁面顯示閲讀時間</td>
</tr>
<tr>
<td>total_wordcount</td>
<td>在側邊欄顯示網站總字數</td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-word-count.png" alt="hexo-theme-butterfly-doc-word-count.png"></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-wordcount-totalcount.png" alt="hexo-theme-butterfly-docs-wordcount-totalcount.png"></p>
<h3 id="訪問人數-busuanzi-UV-和-PV"><a href="#訪問人數-busuanzi-UV-和-PV" class="headerlink" title="訪問人數 busuanzi (UV 和 PV)"></a>訪問人數 busuanzi (UV 和 PV)</h3><p>訪問 busuanzi 的<a target="_blank" rel="noopener" href="http://busuanzi.ibruce.info/">官方網站</a>查看更多的介紹。</p>
<p>由於 busuanzi 的穩定性問題，偶爾會遇到無法訪問的情況，請留意。</p>
<div class="note info flat"><p>文章頁的訪問人數統計，是通過 busuanzi 這個插件實現的。個別評論系統自帶訪問人數統計功能，可以在相對應的評論系統配置中進行開啟，其會代替 busuanzi 的統計。</p>
</div>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">busuanzi:</span></span><br><span class="line">  <span class="attr">site_uv:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">site_pv:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">page_pv:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<div class="note info flat"><p>如果需要修改 busuanzi 的 CDN 鏈接，可通過 <code>主題配置文件</code> 的 <code>CDN</code> 中的 <code>option</code> 進行修改</p>
</div>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">CDN:</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line">  	<span class="attr">busuanzi:</span> <span class="string">xxxxxxxxx</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-busuanzi-site-pv.png" alt="hexo-theme-butterfly-doc-busuanzi-site-pv.png"></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-pv.png" alt="hexo-theme-butterfly-doc-pv.png"></p>
<h2 id="Math-數學"><a href="#Math-數學" class="headerlink" title="Math 數學"></a>Math 數學</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">通用配置</button><button type="button" class="tab">MathJax</button><button type="button" class="tab">KaTeX</button></div><div class="tab-contents"><div class="tab-item-content active"><p>主題支持兩種數學公式渲染引擎，<code>MathJax</code> 和 <code>KaTeX</code>。你可以根據自己的需求選擇一種。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># About the per_page</span></span><br><span class="line"><span class="comment"># if you set it to true, it will load mathjax/katex script in each page</span></span><br><span class="line"><span class="comment"># if you set it to false, it will load mathjax/katex script according to your setting (add the &#x27;mathjax: true&#x27; or &#x27;katex: true&#x27; in page&#x27;s front-matter)</span></span><br><span class="line"><span class="attr">math:</span></span><br><span class="line">  <span class="comment"># Choose: mathjax, katex</span></span><br><span class="line">  <span class="comment"># Leave it empty if you don&#x27;t need math</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hide_scrollbar:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>use</td>
<td>選擇數學公式渲染引擎，選擇 <code>mathjax</code> 或 <code>katex</code>，如果不需要數學公式，請留空</td>
</tr>
<tr>
<td>per_page</td>
<td>是否每一頁都加載數學公式渲染引擎，如果設置為 <code>false</code>，則需要在文章的 <code>Front-matter</code> 添加 <code>mathjax: true</code> 或 <code>katex: true</code>，對應的文章才會加載數學公式渲染引擎</td>
</tr>
<tr>
<td>hide_scrollbar</td>
<td>是否隱藏滾動條</td>
</tr>
</tbody></table></div><div class="tab-item-content"><div class="note warning flat"><p>不要在標題裏使用 mathjax 語法，toc 目錄不一定能正確顯示 mathjax，可能顯示 mathjax 代碼</p>
</div>

<div class="note info flat"><p>建議使用 KaTex 獲得更好的效果，下文有介紹！</p>
</div>

<p>開啟 Mathjax 需要把 <code>use</code> 設置為 <code>mathjax</code></p>
<p>mathjax 配置文件</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mathjax:</span></span><br><span class="line">  <span class="comment"># Enable the contextual menu</span></span><br><span class="line">  <span class="attr">enableMenu:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Choose: all / ams / none, This controls whether equations are numbered and how</span></span><br><span class="line">  <span class="attr">tags:</span> <span class="string">none</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>enableMenu</td>
<td>啟用右鍵菜單</td>
</tr>
<tr>
<td>tags</td>
<td>選擇是否編號，<code>all</code> 全部編號，<code>ams</code> 只編號公式，<code>none</code> 不編號</td>
</tr>
</tbody></table>
<p>使用 Mathjax 前，你需要卸載 hexo 的 markdown 渲染器，然後安裝<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/hexo-renderer-kramed">hexo-renderer-kramed</a></p>
<p>以下操作在你 hexo 博客的目錄下 (<strong>不是 Butterfly 的目錄</strong>):</p>
<ol>
<li><p>安裝插件</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall hexo-renderer-marked --save</span><br><span class="line">npm install hexo-renderer-kramed --save</span><br></pre></td></tr></table></figure>
</li>
<li><p>配置 hexo 根目錄的配置文件</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">kramed:</span></span><br><span class="line">  <span class="attr">gfm:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">pedantic:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">sanitize:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">tables:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">breaks:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">smartLists:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">smartypants:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure></li>
</ol>
<p>效果：</p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-mathjax-2.jpg" alt="hexo-theme-butterfly-doc-mathjax-2.jpg"></p></div><div class="tab-item-content"><div class="note warning flat"><p>不要在標題裏使用 KaTeX 語法，toc 目錄不能正確顯示 KaTeX。</p>
</div>

<p>開啟 KaTeX 需要把 <code>use</code> 設置為 <code>katex</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">katex:</span></span><br><span class="line">  <span class="comment"># Enable the copy KaTeX formula</span></span><br><span class="line">  <span class="attr">copy_tex:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>copy_tex</td>
<td>啟用複製 KaTeX 公式功能</td>
</tr>
</tbody></table>
<p>你不需要添加 <code>katex.min.js</code> 來渲染數學方程。相應的你需要卸載你之前的 hexo 的 markdown 渲染器，然後安裝其它插件。</p>
<div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">hexo-renderer-markdown-it 【建議】</button><button type="button" class="tab">hexo-renderer-markdown-it-plus</button></div><div class="tab-contents"><div class="tab-item-content active"><p>卸載掉 marked 插件，安裝 <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo-renderer-markdown-it">hexo-renderer-markdown-it</a></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm un hexo-renderer-marked --save <span class="comment"># 如果有安裝這個的話，卸載</span></span><br><span class="line">npm un hexo-renderer-kramed --save <span class="comment"># 如果有安裝這個的話，卸載</span></span><br><span class="line"></span><br><span class="line">npm i hexo-renderer-markdown-it --save <span class="comment"># 需要安裝這個渲染插件</span></span><br><span class="line">npm install katex @renbaoshuo/markdown-it-katex <span class="comment">#需要安裝這個katex插件</span></span><br></pre></td></tr></table></figure>

<p>在 hexo 的根目錄的 <code>_config.yml</code> 中配置</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">markdown:</span></span><br><span class="line">  <span class="attr">plugins:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&#x27;@renbaoshuo/markdown-it-katex&#x27;</span></span><br></pre></td></tr></table></figure>

<p>如需配置其它參數，請參考 <a target="_blank" rel="noopener" href="https://katex.org/docs/options.html">katex 官網</a></p></div><div class="tab-item-content"><div class="note warning flat"><p>注意，此方法生成的 katex 沒有斜體</p>
</div>

<p>卸載掉 marked 插件，然後安裝新的<code>hexo-renderer-markdown-it-plus</code>:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替換 `hexo-renderer-kramed` 或者 `hexo-renderer-marked` 等hexo的markdown渲染器</span></span><br><span class="line"><span class="comment"># 你可以在你的package.json裏找到hexo的markdwon渲染器，並將其卸載</span></span><br><span class="line">npm un hexo-renderer-marked --save</span><br><span class="line"></span><br><span class="line"><span class="comment"># or</span></span><br><span class="line"></span><br><span class="line">npm un hexo-renderer-kramed --save</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment"># 然後安裝 `hexo-renderer-markdown-it-plus`</span></span><br><span class="line">npm i @upupming/hexo-renderer-markdown-it-plus --save</span><br></pre></td></tr></table></figure>

<p>注意到 <a target="_blank" rel="noopener" href="https://github.com/CHENXCHEN/hexo-renderer-markdown-it-plus"><code>hexo-renderer-markdown-it-plus</code></a>已經無人持續維護, 所以我們使用 <a target="_blank" rel="noopener" href="https://github.com/upupming/hexo-renderer-markdown-it-plus"><code>@upupming/hexo-renderer-markdown-it-plus</code></a>。 這份 fork 的代碼使用了 <a target="_blank" rel="noopener" href="https://github.com/yzhang-gh/markdown-it-katex"><code>@neilsustc/markdown-it-katex</code></a>同時它也是 VSCode 的插件 <a target="_blank" rel="noopener" href="https://github.com/yzhang-gh/vscode-markdown">Markdown All in One</a>所使用的, 所以我們可以獲得最新的 KaTex 功能例如 <code>\tag{}</code>。</p>
<p>你還可以通過 <a target="_blank" rel="noopener" href="https://github.com/yzhang-gh/markdown-it-katex"><code>@neilsustc/markdown-it-katex</code></a>控制 KaTeX 的設置，所有可配置的選項參見 <a target="_blank" rel="noopener" href="https://katex.org/docs/options.html%E3%80%82">https://katex.org/docs/options.html。</a> 比如你想要禁用掉 KaTeX 在命令行上輸出的宂長的警告信息，你可以在根目錄的 <code>_config.yml</code> 中使用下面的配置將 <code>strict</code> 設置為 false:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">markdown_it_plus:</span></span><br><span class="line">  <span class="attr">plugins:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">plugin:</span></span><br><span class="line">      <span class="attr">name:</span> <span class="string">&#x27;@neilsustc/markdown-it-katex&#x27;</span></span><br><span class="line">      <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">      <span class="attr">options:</span></span><br><span class="line">        <span class="attr">strict:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<p>當然，你還可以利用這個特性來定義一些自己常用的 <code>macros</code>。</p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div>

<p>因為 KaTeX 更快更輕量，因此沒有 MathJax 的功能多（比如右鍵菜單）。為那些使用 MathJax 的用户，主題也內置了 katex 的 <a target="_blank" rel="noopener" href="https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex">複製</a> 功能。</p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-katex.gif" alt="hexo-theme-butterfly-doc-katex.gif"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div>

<h2 id="搜索"><a href="#搜索" class="headerlink" title="搜索"></a>搜索</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">通用配置</button><button type="button" class="tab"><i class="fab fa-algolia"></i>Algolia</button><button type="button" class="tab"><i class="fas fa-search"></i>本地搜索</button><button type="button" class="tab"><i class="fas fa-search"></i>DocSearch</button></div><div class="tab-contents"><div class="tab-item-content active"><p>主題支持三種搜索方式（algolia_search &#x2F; local_search &#x2F; docsearch），你可以選擇一種或者多種搜索方式。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line">  <span class="comment"># Choose: algolia_search / local_search / docsearch</span></span><br><span class="line">  <span class="comment"># leave it empty if you don&#x27;t need search</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="attr">placeholder:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>use</td>
<td>選擇你需要的搜索方式，不需要開啟留空白</td>
</tr>
<tr>
<td>placeholder</td>
<td>搜索框的提示文字</td>
</tr>
</tbody></table></div><div class="tab-item-content"><div class="note warning flat"><p>記得運行 hexo clean</p>
</div>

<div class="note warning flat"><p>如果你使用 <a target="_blank" rel="noopener" href="https://github.com/LouisBarranqueiro/hexo-algoliasearch">hexo-algoliasearch</a>，請記得配置 fields 參數的 <code>title</code>, <code>permalink</code> 和 <code>content</code></p>
</div>

<ol>
<li><p>你需要安裝 <a target="_blank" rel="noopener" href="https://github.com/oncletom/hexo-algolia">hexo-algolia</a>或 <a target="_blank" rel="noopener" href="https://github.com/LouisBarranqueiro/hexo-algoliasearch">hexo-algoliasearch</a>. 根據它們的説明文檔去做相應的配置。</p>
</li>
<li><p>把主題配置文件中 search 的 use 配置為 <code>algolia_search</code></p>
</li>
</ol>
<p>其它配置</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Algolia Search</span></span><br><span class="line"><span class="attr">algolia_search:</span></span><br><span class="line">  <span class="comment"># Number of search results per page</span></span><br><span class="line">  <span class="attr">hitsPerPage:</span> <span class="number">6</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>hitsPerPage</td>
<td>每頁顯示的搜索結果數量</td>
</tr>
</tbody></table>
<ol start="3">
<li>運行 Hexo</li>
</ol></div><div class="tab-item-content"><div class="note warning flat"><p>記得運行 hexo clean</p>
</div>

<ol>
<li><p>你需要安裝 <a target="_blank" rel="noopener" href="https://github.com/next-theme/hexo-generator-searchdb">hexo-generator-searchdb</a> 或者 <a target="_blank" rel="noopener" href="https://github.com/PaicHyperionDev/hexo-generator-search">hexo-generator-search</a>，根據它的文檔去做相應配置</p>
</li>
<li><p>把主題配置文件中 search 的 use 配置為 <code>local_search</code></p>
</li>
</ol>
<p>其它配置</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Local Search</span></span><br><span class="line"><span class="attr">local_search:</span></span><br><span class="line">  <span class="comment"># Preload the search data when the page loads.</span></span><br><span class="line">  <span class="attr">preload:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Show top n results per article, show all results by setting to -1</span></span><br><span class="line">  <span class="attr">top_n_per_article:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment"># Unescape html strings to the readable one.</span></span><br><span class="line">  <span class="attr">unescape:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">CDN:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>preload</td>
<td>預加載，開啟後，進入網頁後會自動加載搜索文件。關閉時，只有點擊搜索按鈕後，才會加載搜索文件</td>
</tr>
<tr>
<td>top_n_per_article</td>
<td>匹配的文章結果，默認顯示最開始的 1 段結果</td>
</tr>
<tr>
<td>unescape</td>
<td>將 html 字符串解碼為可讀字符串</td>
</tr>
<tr>
<td>CDN</td>
<td>搜索文件的 CDN 地址（默認使用的本地鏈接）</td>
</tr>
</tbody></table></div><div class="tab-item-content"><p>DocSearch 是另一款由 algolia 提供的搜索服務，具體申請和使用請查看 <a target="_blank" rel="noopener" href="https://docsearch.algolia.com/">DocSearch 文檔</a></p>
<ol>
<li>你需要申請 <a target="_blank" rel="noopener" href="https://docsearch.algolia.com/">DocSearch</a>，並獲取你的 <code>appId</code>, <code>apiKey</code>, <code>indexName</code></li>
<li>把主題配置文件中 search 的 use 配置為 <code>docsearch</code></li>
</ol>
<p>其它配置</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"># Docsearch</span><br><span class="line"># https://docsearch.algolia.com/</span><br><span class="line">docsearch:</span><br><span class="line">  appId:</span><br><span class="line">  apiKey:</span><br><span class="line">  indexName:</span><br><span class="line">  option:</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>appId</td>
<td>【必須】你的 Algolia 應用 ID</td>
</tr>
<tr>
<td>apiKey</td>
<td>【必須】你的 Algolia 搜索 API key</td>
</tr>
<tr>
<td>indexName</td>
<td>【必須】你的 Algolia index name</td>
</tr>
<tr>
<td>option</td>
<td>【可選】其餘的 docsearch 配置<br />具體配置可查<a target="_blank" rel="noopener" href="https://docsearch.algolia.com/docs/api/">這裏</a></td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-docsearch.png" alt="hexo-theme-butterfly-docs-docsearch.png"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div>

<h2 id="分享"><a href="#分享" class="headerlink" title="分享"></a>分享</h2><div class="note warning flat"><p>只能選擇一個分享服務商</p>
</div>

<div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">Sharejs</button><button type="button" class="tab">Sharejs</button><button type="button" class="tab">Addtoany</button></div><div class="tab-contents"><div class="tab-item-content active"><p>主題支持兩種分享方式，一種是<code>sharejs</code>，一種是<code>addtoany</code>。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">share:</span></span><br><span class="line">  <span class="comment"># Choose: sharejs / addtoany</span></span><br><span class="line">  <span class="comment"># Leave it empty if you don&#x27;t need share</span></span><br><span class="line">  <span class="attr">use:</span> <span class="string">sharejs</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>use</td>
<td>選擇分享方式，可選<code>sharejs</code>或<code>addtoany</code>，如果不需要分享請留空</td>
</tr>
</tbody></table></div><div class="tab-item-content"><p>如果你不知道 <a target="_blank" rel="noopener" href="https://github.com/overtrue/share.js/">sharejs</a>，看看它的説明。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Share.js</span></span><br><span class="line"><span class="comment"># https://github.com/overtrue/share.js</span></span><br><span class="line"><span class="attr">sharejs:</span></span><br><span class="line">  <span class="attr">sites:</span> <span class="string">facebook,twitter,wechat,weibo,qq</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-sharejs.png" alt="hexo-theme-butterfly-doc-sharejs.png"></p></div><div class="tab-item-content"><p>可以到<a target="_blank" rel="noopener" href="https://www.addtoany.com/">addtoany</a>查看使用説明</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">addtoany:</span></span><br><span class="line">  <span class="attr">item:</span> <span class="string">facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-addtoany.png" alt="hexo-theme-butterfly-doc-addtoany.png"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div>

<h2 id="評論"><a href="#評論" class="headerlink" title="評論"></a>評論</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">通用設置</button><button type="button" class="tab">Disqus</button><button type="button" class="tab">Disqusjs</button><button type="button" class="tab">livere（來必力）</button><button type="button" class="tab">Gitalk</button><button type="button" class="tab">Valine</button><button type="button" class="tab">Waline</button><button type="button" class="tab">Utterances</button><button type="button" class="tab">Facebook Comments</button><button type="button" class="tab">Twikoo</button><button type="button" class="tab">Giscus</button><button type="button" class="tab">Remark42</button><button type="button" class="tab">Artalk</button></div><div class="tab-contents"><div class="tab-item-content active"><p>主題支持多種評論系統，你可以根據自己的喜好選擇一種。<br>你也可以選擇雙評論，只需要配置兩個評論（第一個為默認顯示）</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">comments:</span></span><br><span class="line">  <span class="comment"># Up to two comments system, the first will be shown as default</span></span><br><span class="line">  <span class="comment"># Leave it empty if you don&#x27;t need comments</span></span><br><span class="line">  <span class="comment"># Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk</span></span><br><span class="line">  <span class="comment"># Format of two comments system : Disqus,Waline</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="comment"># Display the comment name next to the button</span></span><br><span class="line">  <span class="attr">text:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Lazyload: The comment system will be load when comment element enters the browser&#x27;s viewport.</span></span><br><span class="line">  <span class="comment"># If you set it to true, the comment count will be invalid</span></span><br><span class="line">  <span class="attr">lazyload:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Display comment count in post&#x27;s top_img</span></span><br><span class="line">  <span class="attr">count:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Display comment count in Home Page</span></span><br><span class="line">  <span class="attr">card_post_count:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>use</td>
<td>使用的評論（請注意，最多支持兩個，如果不需要請留空）<br><em>注意：雙評論不能是 Disqus 和 Disqusjs 一起，由於其共用同一個 ID，會出錯</em></td>
</tr>
<tr>
<td>text</td>
<td>是否顯示評論服務商的名字</td>
</tr>
<tr>
<td>lazyload</td>
<td>是否為評論開啟 lazyload，開啟後，只有滾動到評論位置時才會加載評論所需要的資源（_開啟 lazyload 後，評論數將不顯示_）</td>
</tr>
<tr>
<td>count</td>
<td>是否在文章頂部顯示評論數 <br/> livere、Giscus 和 utterances 不支持評論數顯示</td>
</tr>
<tr>
<td>card_post_count</td>
<td>是否在首頁文章卡片顯示評論數<br/>gitalk、livere 、Giscus 和 utterances 不支持評論數顯示</td>
</tr>
</tbody></table>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>單評論</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-single-comments.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>雙評論</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-double-comments.png"></p></div><div class="tab-item-content"><p>註冊 <a target="_blank" rel="noopener" href="https://disqus.com/">disqus</a>，配置你自己的 disqus，然後在<code>Butterfly</code>裏開啟它。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">disqus:</span></span><br><span class="line">  <span class="attr">shortname:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>shortname</td>
<td>你的 Disqus 短名稱，你可以在<a target="_blank" rel="noopener" href="https://disqus.com/admin/create/">這裏</a>創建</td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-disqus.png"></p></div><div class="tab-item-content"><p>與 Disqus 一樣，但由於 Disqus 在中國大陸無法訪問， 使用 Disqusjs 可以在無法訪問 Disqus 時顯示評論。具體可參考<a target="_blank" rel="noopener" href="https://github.com/SukkaW/DisqusJS">Disqusjs</a>。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">disqusjs:</span></span><br><span class="line">  <span class="attr">shortname:</span></span><br><span class="line">  <span class="attr">apikey:</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>shortname</td>
<td>你的 Disqus 短名稱，你可以在<a target="_blank" rel="noopener" href="https://disqus.com/admin/create/">這裏</a>創建</td>
</tr>
<tr>
<td>apikey</td>
<td>你的 Disqus API Key，你可以在<a target="_blank" rel="noopener" href="https://disqus.com/api/applications/">這裏</a>創建</td>
</tr>
<tr>
<td>option</td>
<td>可選配置</td>
</tr>
</tbody></table>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>當無法訪問 Disqus 時，會顯示</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-disqusjs.png"></p></div><div class="tab-item-content"><p>註冊<a target="_blank" rel="noopener" href="https://livere.com/">來必力</a>，配置你自己的來必力設置，然後在<code>Butterfly</code>裏開啟它。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">livere:</span></span><br><span class="line">  <span class="attr">uid:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>uid</td>
<td>你的來必力 uid，你可以在<a target="_blank" rel="noopener" href="https://livere.com/">這裏</a>創建</td>
</tr>
</tbody></table>
<p>livere 的 uid 你能在這裏找到:</p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-laibili.jpg" alt="hexo-theme-butterfly-doc-laibili.jpg"></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-livere.png"></p></div><div class="tab-item-content"><p>遵循 <a target="_blank" rel="noopener" href="https://github.com/gitalk/gitalk">gitalk</a>的指示去獲取你的 github Oauth 應用的 client id 和 secret 值。以及查看它的相關配置説明。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">gitalk:</span></span><br><span class="line">  <span class="attr">client_id:</span></span><br><span class="line">  <span class="attr">client_secret:</span></span><br><span class="line">  <span class="attr">repo:</span></span><br><span class="line">  <span class="attr">owner:</span></span><br><span class="line">  <span class="attr">admin:</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>client_id</td>
<td>GitHub 應用的 client ID</td>
</tr>
<tr>
<td>client_secret</td>
<td>GitHub 應用的 client secret</td>
</tr>
<tr>
<td>repo</td>
<td>存儲 issues 的 repo</td>
</tr>
<tr>
<td>owner</td>
<td>存儲 issues 的 repo 的擁有者</td>
</tr>
<tr>
<td>admin</td>
<td>GitHub repository 的所有者和合作者 (對這個 repository 有寫權限的用户)</td>
</tr>
<tr>
<td>option</td>
<td>可選配置</td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-gitalk.png"></p></div><div class="tab-item-content"><p>遵循 <a target="_blank" rel="noopener" href="https://github.com/xCss/Valine">Valine</a>的指示去配置你的 LeanCloud 應用。以及查看相應的配置説明。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">valine:</span></span><br><span class="line">  <span class="attr">appId:</span></span><br><span class="line">  <span class="attr">appKey:</span></span><br><span class="line">  <span class="attr">avatar:</span> <span class="string">monsterid</span></span><br><span class="line">  <span class="comment"># This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)</span></span><br><span class="line">  <span class="attr">serverURLs:</span></span><br><span class="line">  <span class="attr">bg:</span></span><br><span class="line">  <span class="comment"># Use Valine visitor count as the page view count</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>appId</td>
<td>LeanCloud 應用的 appId</td>
</tr>
<tr>
<td>appKey</td>
<td>LeanCloud 應用的 appKey</td>
</tr>
<tr>
<td>avatar</td>
<td>頭像類型，可選值：<code>&#39;&#39;</code>、<code>mp</code>、<code>identicon</code>、<code>monsterid</code>、<code>wavatar</code>、<code>retro</code>、<code>robohash</code>、<code>blank</code>、<code>404</code></td>
</tr>
<tr>
<td>serverURLs</td>
<td>自定義 LeanCloud 服務器地址，如果你使用國內自定義域名，請填寫此項，否則無需填寫</td>
</tr>
<tr>
<td>bg</td>
<td>背景圖片，可填寫圖片地址，如<code>https://example.com/bg.jpg</code></td>
</tr>
<tr>
<td>visitor</td>
<td>是否顯示文章閲讀數</td>
</tr>
<tr>
<td>option</td>
<td>可選配置</td>
</tr>
</tbody></table>
<div class="note info flat"><p>開啟 visitor 後，文章頁的訪問人數將改為 Valine 提供，而不是 <strong>不蒜子</strong></p>
</div>

<p>Valine 於 v1.4.5 開始支持自定義表情，如果你需要自行配置，請在<code>emojiCDN</code>配置表情 CDN。</p>
<p>同時在 Hexo 工作目錄下的<code>source/_data/</code>創建一個 json 文件<code>valine.json</code>,等同於 Valine 需要配置的<code>emojiMaps</code>，<code>valine.json</code>配置方式可參考如下</p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>valine.json</p>
</div>

<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;tv_doge&quot;</span><span class="punctuation">:</span> <span class="string">&quot;6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_親親&quot;</span><span class="punctuation">:</span> <span class="string">&quot;a8111ad55953ef5e3be3327ef94eb4a39d535d06.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_偷笑&quot;</span><span class="punctuation">:</span> <span class="string">&quot;bb690d4107620f1c15cff29509db529a73aee261.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_再見&quot;</span><span class="punctuation">:</span> <span class="string">&quot;180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_冷漠&quot;</span><span class="punctuation">:</span> <span class="string">&quot;b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_發怒&quot;</span><span class="punctuation">:</span> <span class="string">&quot;34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_發財&quot;</span><span class="punctuation">:</span> <span class="string">&quot;34db290afd2963723c6eb3c4560667db7253a21a.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_可愛&quot;</span><span class="punctuation">:</span> <span class="string">&quot;9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_吐血&quot;</span><span class="punctuation">:</span> <span class="string">&quot;09dd16a7aa59b77baa1155d47484409624470c77.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_呆&quot;</span><span class="punctuation">:</span> <span class="string">&quot;fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_嘔吐&quot;</span><span class="punctuation">:</span> <span class="string">&quot;9f996894a39e282ccf5e66856af49483f81870f3.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_困&quot;</span><span class="punctuation">:</span> <span class="string">&quot;241ee304e44c0af029adceb294399391e4737ef2.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_壞笑&quot;</span><span class="punctuation">:</span> <span class="string">&quot;1f0b87f731a671079842116e0991c91c2c88645a.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_大佬&quot;</span><span class="punctuation">:</span> <span class="string">&quot;093c1e2c490161aca397afc45573c877cdead616.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_大哭&quot;</span><span class="punctuation">:</span> <span class="string">&quot;23269aeb35f99daee28dda129676f6e9ea87934f.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_委屈&quot;</span><span class="punctuation">:</span> <span class="string">&quot;d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_害羞&quot;</span><span class="punctuation">:</span> <span class="string">&quot;a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_尷尬&quot;</span><span class="punctuation">:</span> <span class="string">&quot;7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_微笑&quot;</span><span class="punctuation">:</span> <span class="string">&quot;70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_思考&quot;</span><span class="punctuation">:</span> <span class="string">&quot;90cf159733e558137ed20aa04d09964436f618a1.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_驚嚇&quot;</span><span class="punctuation">:</span> <span class="string">&quot;0d15c7e2ee58e935adc6a7193ee042388adc22af.png&quot;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-valine.png" alt="hexo-theme-butterfly-doc-valine.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>default_avatar</p>
</div>

<table>
<thead>
<tr>
<th>參數</th>
<th>效果</th>
</tr>
</thead>
<tbody><tr>
<td>留空（默認）</td>
<td><img src= "/images/2.gif" data-lazy-src="https://www.gravatar.com/avatar/00000000000000000000000000000000"></td>
</tr>
<tr>
<td>mp</td>
<td><img src= "/images/2.gif" data-lazy-src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp"></td>
</tr>
<tr>
<td>identicon</td>
<td><img src= "/images/2.gif" data-lazy-src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=identicon"></td>
</tr>
<tr>
<td>monsterid</td>
<td><img src= "/images/2.gif" data-lazy-src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=monsterid"></td>
</tr>
<tr>
<td>wavatar</td>
<td><img src= "/images/2.gif" data-lazy-src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=wavatar"></td>
</tr>
<tr>
<td>retro</td>
<td><img src= "/images/2.gif" data-lazy-src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=retro"></td>
</tr>
<tr>
<td>robohash</td>
<td><img src= "/images/2.gif" data-lazy-src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=robohash"></td>
</tr>
<tr>
<td>blank</td>
<td><img src= "/images/2.gif" data-lazy-src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=blank&f=y"></td>
</tr>
<tr>
<td>404</td>
<td><img src= "/images/2.gif" data-lazy-src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y"></td>
</tr>
</tbody></table></div><div class="tab-item-content"><p>Waline - 一款從 Valine 衍生的帶後端評論系統。可以將 Waline 等價成 With backend Valine。</p>
<p>具體配置可參考 <a target="_blank" rel="noopener" href="https://waline.js.org/">waline 文檔</a></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">waline:</span></span><br><span class="line">  <span class="attr">serverURL:</span> <span class="comment"># Waline server address url</span></span><br><span class="line">  <span class="attr">bg:</span> <span class="comment"># waline background</span></span><br><span class="line">  <span class="attr">pageview:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>serverURL</td>
<td>Waline 服務器地址</td>
</tr>
<tr>
<td>bg</td>
<td>背景圖片，可填寫圖片地址，如<code>https://example.com/bg.jpg</code></td>
</tr>
<tr>
<td>pageview</td>
<td>是否顯示文章閲讀數</td>
</tr>
<tr>
<td>option</td>
<td>可選配置</td>
</tr>
</tbody></table>
<div class="note info flat"><p>開啟 pageview 後，文章頁的訪問人數將改為 Waline 提供，而不是 <strong>不蒜子</strong></p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-valine.png" alt="hexo-theme-butterfly-doc-valine.png"></p></div><div class="tab-item-content"><p>與 Gitalk 一樣，基於 GitHub issues 的評論工具。相對於 Gitalk,其相對需要權限較少。具體配置可參考<a target="_blank" rel="noopener" href="https://utteranc.es/">Utterances</a>。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">utterances:</span></span><br><span class="line">  <span class="attr">repo:</span></span><br><span class="line">  <span class="comment"># 可選 pathname/url/title/og:title</span></span><br><span class="line">  <span class="attr">issue_term:</span> <span class="string">pathname</span></span><br><span class="line">  <span class="comment"># 可選 github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark</span></span><br><span class="line">  <span class="attr">light_theme:</span> <span class="string">github-light</span></span><br><span class="line">  <span class="attr">dark_theme:</span> <span class="string">photon-dark</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>repo</td>
<td>GitHub repository 的全名，例如：<code>owner/repo</code></td>
</tr>
<tr>
<td>issue_term</td>
<td>用於識別問題的標籤，可以是 pathname&#x2F;url&#x2F;title&#x2F;og:title</td>
</tr>
<tr>
<td>light_theme</td>
<td>亮色主題，可選值：<code>github-light</code>、<code>github-dark</code>、<code>github-dark-orange</code>、<code>icy-dark</code>、<code>dark-blue</code>、<code>photon-dark</code></td>
</tr>
<tr>
<td>dark_theme</td>
<td>暗色主題，可選值：<code>github-light</code>、<code>github-dark</code>、<code>github-dark-orange</code>、<code>icy-dark</code>、<code>dark-blue</code>、<code>photon-dark</code></td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-Utterances.png" alt="hexo-theme-butterfly-docs-Utterances.png"></p></div><div class="tab-item-content"><p><code>Facebook Comments</code>是 Facebook 提供的評論插件，需要登陸 Facebook 才可評論。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Facebook Comments Plugin</span></span><br><span class="line"><span class="comment"># https://developers.facebook.com/docs/plugins/comments/</span></span><br><span class="line"><span class="attr">facebook_comments:</span></span><br><span class="line">  <span class="attr">app_id:</span></span><br><span class="line">  <span class="comment"># optional</span></span><br><span class="line">  <span class="attr">user_id:</span></span><br><span class="line">  <span class="attr">pageSize:</span> <span class="number">10</span></span><br><span class="line">  <span class="comment"># Choose: social / time / reverse_time</span></span><br><span class="line">  <span class="attr">order_by:</span> <span class="string">social</span></span><br><span class="line">  <span class="attr">lang:</span> <span class="string">zh_TW</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>app_id</td>
<td>Facebook App ID，你可以在<a target="_blank" rel="noopener" href="https://developers.facebook.com/apps/">這裏</a>創建</td>
</tr>
<tr>
<td>user_id</td>
<td>Facebook User ID，可選，用於管理評論</td>
</tr>
<tr>
<td>pageSize</td>
<td>顯示的評論數</td>
</tr>
<tr>
<td>order_by</td>
<td>評論排序方式,social&#x2F;time&#x2F;reverse_time</td>
</tr>
<tr>
<td>lang</td>
<td>語言</td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-butterfly-docs-facebook-comments.png" alt="hexo-butterfly-docs-facebook-comments.png"></p></div><div class="tab-item-content"><p><code>Twikoo</code> 是一個簡潔、安全、無後端的靜態網站評論系統，基於<a target="_blank" rel="noopener" href="https://curl.qcloud.com/KnnJtUom">騰訊雲開發</a>。</p>
<p>具體如何配置評論，請查看 <a target="_blank" rel="noopener" href="https://twikoo.js.org/quick-start.html#%E7%8E%AF%E5%A2%83%E5%88%9D%E5%A7%8B%E5%8C%96">Twikoo 文檔</a></p>
<p>你只需要把獲取到的 <code>環境ID (envId)</code> 填寫到配置上去就行</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">twikoo:</span></span><br><span class="line">  <span class="attr">envId:</span></span><br><span class="line">  <span class="attr">region:</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>envId</td>
<td>環境 ID</td>
</tr>
<tr>
<td>region</td>
<td>環境地域，默認為 ap-shanghai，如果您的環境地域不是上海，需傳此參數</td>
</tr>
<tr>
<td>visitor</td>
<td>是否顯示文章閲讀數</td>
</tr>
<tr>
<td>option</td>
<td>可選配置</td>
</tr>
</tbody></table>
<div class="note info flat"><p>開啟 visitor 後，文章頁的訪問人數將改為 Twikoo 提供，而不是 <strong>不蒜子</strong></p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-twikoo.png"></p></div><div class="tab-item-content"><p>一個基於 <em>GitHub Discussions</em> 的評論</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Giscus</span></span><br><span class="line"><span class="comment"># https://giscus.app/</span></span><br><span class="line"><span class="attr">giscus:</span></span><br><span class="line">  <span class="attr">repo:</span></span><br><span class="line">  <span class="attr">repo_id:</span></span><br><span class="line">  <span class="attr">category_id:</span></span><br><span class="line">  <span class="attr">theme:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">light</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">dark</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>repo</td>
<td>GitHub repository 的全名，例如：<code>owner/repo</code></td>
</tr>
<tr>
<td>repo_id</td>
<td>GitHub repository 的 ID</td>
</tr>
<tr>
<td>category_id</td>
<td>GitHub repository 的分類 ID</td>
</tr>
<tr>
<td>option</td>
<td>可選配置</td>
</tr>
</tbody></table>
<p>具體配置的意思，請參考 Giscus 的<a target="_blank" rel="noopener" href="https://giscus.app/zh-TW">文檔</a></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-giscus.png" alt="hexo-theme-butterfly-docs-giscus.png"></p></div><div class="tab-item-content"><p>Remark42 是一款只支持<strong>私有部署</strong>的評論</p>
<p>具體部署請查看 <a target="_blank" rel="noopener" href="https://remark42.com/docs/getting-started/installation/">Installation | Remark42</a></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">remark42:</span></span><br><span class="line">  <span class="attr">host:</span> <span class="comment"># Your Host URL</span></span><br><span class="line">  <span class="attr">siteId:</span> <span class="comment"># Your Site ID</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>host</td>
<td>你的 Host URL</td>
</tr>
<tr>
<td>siteId</td>
<td>你的 Site ID</td>
</tr>
<tr>
<td>option</td>
<td>可選配置</td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/hexo-butterfly-docs-remark42.png"></p></div><div class="tab-item-content"><p>Artalk 是一款只支持<strong>私有部署</strong>的評論</p>
<p>具體部署請查看 <a target="_blank" rel="noopener" href="https://artalk.js.org/">Artalk | 自託管評論系統</a></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">artalk:</span></span><br><span class="line">  <span class="attr">server:</span></span><br><span class="line">  <span class="attr">site:</span></span><br><span class="line">  <span class="comment"># Use Artalk visitor count as the page view count</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>server</td>
<td>你的 Server URL</td>
</tr>
<tr>
<td>site</td>
<td>你的 Site ID</td>
</tr>
<tr>
<td>visitor</td>
<td>是否顯示文章閲讀數</td>
</tr>
<tr>
<td>option</td>
<td>可選配置</td>
</tr>
</tbody></table>
<div class="note info flat"><p>開啟 visitor 後，文章頁的訪問人數將改為 Artalk 提供，而不是 <strong>不蒜子</strong></p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/hexo-butterfly-docs-artalk.png"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div>

<h2 id="在綫聊天"><a href="#在綫聊天" class="headerlink" title="在綫聊天"></a>在綫聊天</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">通用設置</button><button type="button" class="tab">chatra</button><button type="button" class="tab">tidio</button><button type="button" class="tab">daovoice</button><button type="button" class="tab">crisp</button></div><div class="tab-contents"><div class="tab-item-content active"><p>主題內置了多種在綫聊天工具。你可以選擇開啟一種，方便你與訪客的交流。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">chat:</span></span><br><span class="line">  <span class="comment"># Choose: chatra/tidio/daovoice/crisp</span></span><br><span class="line">  <span class="comment"># Leave it empty if you don&#x27;t need chat</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="comment"># Chat Button [recommend]</span></span><br><span class="line">  <span class="comment"># It will create a button in the bottom right corner of website, and hide the origin button</span></span><br><span class="line">  <span class="attr">rightside_button:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down</span></span><br><span class="line">  <span class="attr">button_hide_show:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>use</td>
<td>選擇你要使用的聊天工具，可選擇<code>chatra</code>&#x2F;<code>tidio</code>&#x2F;<code>daovoice</code>&#x2F;<code>crisp</code></td>
</tr>
<tr>
<td>rightside_button</td>
<td>是否開啟右下角聊天按鈕</td>
</tr>
<tr>
<td>button_hide_show</td>
<td>是否開啟滾動時隱藏聊天按鈕</td>
</tr>
</tbody></table>
<p>這些工具都提供了一個按鈕可以打開&#x2F;關閉聊天窗口。<br>主題也提供了一個集合主題特色的按鈕來替換這些工具本身的按鈕，這個聊天按鈕將會出現在右下角裏。<br>你只需要把<code>rightside_button</code>打開就行。</p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-chatbtn.png"></p>
<p>為了不影響訪客的體驗，主題提供一個<code>button_hide_show</code>配置<br>設為<code>true</code>後，使用工具提供的按鈕時，只有向上滾動才會顯示聊天按鈕，向下滾動時會隱藏按鈕。</p></div><div class="tab-item-content"><div class="note info flat"><p>開啟 chatra， 把主題配置文件中 <code>chat</code> 的 <code>use</code>設置為<code>chatra</code></p>
</div>

<p>配置 chatra,需要知道<code>Public key</code></p>
<p>打開<a target="_blank" rel="noopener" href="https://chatra.com/">chatra</a>並註冊賬號。<br>你可以在<code>Preferences</code>中找到<code>Public key</code></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-chat-chatra-id.png" alt="hexo-theme-butterfly-docs-chat-chatra-id.png"></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># chatra</span></span><br><span class="line"><span class="comment"># https://chatra.io/</span></span><br><span class="line"><span class="attr">chatra:</span></span><br><span class="line">  <span class="attr">id:</span> <span class="string">xxxxxxxx</span></span><br></pre></td></tr></table></figure>

<p><code>chatra</code>的樣式你可以<code>Chat Widget</code>自行配置</p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-chat-chatra-ui-settings.png" alt="hexo-theme-butterfly-docs-chat-chatra-ui-settings.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Demo</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-chat-chatra-ui-demo.png"></p></div><div class="tab-item-content"><div class="note info flat"><p>開啟 tidio， 把主題配置文件中 <code>chat</code> 的 <code>use</code>設置為<code>tidio</code></p>
</div>

<p>配置 tidio,需要知道<code>Public key</code></p>
<p>打開<a target="_blank" rel="noopener" href="https://www.tidio.com/">tidio</a>並註冊賬號。<br>你可以在<code>Preferences &gt; Developer</code>中找到<code>Public key</code></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-chat-tidio-id.png" alt="hexo-theme-butterfly-docs-chat-tidio-id.png"></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># tidio</span></span><br><span class="line"><span class="comment"># https://www.tidio.com/</span></span><br><span class="line"><span class="attr">tidio:</span></span><br><span class="line">  <span class="attr">public_key:</span> <span class="string">XXXX</span></span><br></pre></td></tr></table></figure>

<p><code>tidio</code>的樣式你可以<code>Channels</code>自行配置</p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-chat-tidio-setting.png" alt="hexo-theme-butterfly-docs-chat-tidio-setting.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Demo</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-chat-tidio-demo.png"></p></div><div class="tab-item-content"><div class="note info flat"><p>開啟 daovoice， 把主題配置文件中 <code>chat</code> 的 <code>use</code>設置為<code>daovoice</code></p>
</div>

<p>打開<a target="_blank" rel="noopener" href="http://daovoice.io/">daovoice</a>和註冊帳號<br>找到你的<code>app id</code></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-chat-daovoice-appid.png" alt="hexo-theme-butterfly-docs-chat-daovoice-appid.png"></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># daovoice</span></span><br><span class="line"><span class="comment"># http://daovoice.io/</span></span><br><span class="line"><span class="attr">daovoice:</span></span><br><span class="line">  <span class="attr">app_id:</span> <span class="string">xxxxx</span></span><br></pre></td></tr></table></figure>

<p>可在<code>聊天設置</code>裏配置聊天按鈕等樣式</p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-chat-daovoice-ui.png" alt="hexo-theme-butterfly-docs-chat-daovoice-ui.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Demo</p>
</div></div><div class="tab-item-content"><div class="note info flat"><p>開啟 crisp， 把主題配置文件中 <code>chat</code> 的 <code>use</code>設置為<code>crisp</code></p>
</div>

<p>打開<a target="_blank" rel="noopener" href="https://crisp.chat/en/">crisp</a>並註冊帳號</p>
<p>找到需要的網站 ID</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># crisp</span></span><br><span class="line"><span class="comment"># https://crisp.chat/en/</span></span><br><span class="line"><span class="attr">crisp:</span></span><br><span class="line">  <span class="attr">website_id:</span> <span class="string">xxxxxxxx</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-buttefly-docs-chat-crisp.png" alt="hexo-theme-buttefly-docs-chat-crisp.png"></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-crisp-demo.png" alt="hexo-theme-butterfly-docs-crisp-demo.png"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div>

<h2 id="分析統計"><a href="#分析統計" class="headerlink" title="分析統計"></a>分析統計</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">百度統計</button><button type="button" class="tab">谷歌分析</button><button type="button" class="tab">Cloudflare分析</button><button type="button" class="tab">Microsoft Clarity</button></div><div class="tab-contents"><div class="tab-item-content active"><ol>
<li><p>登錄百度統計的<a target="_blank" rel="noopener" href="https://tongji.baidu.com/web/welcome/login">官方網站</a></p>
</li>
<li><p>找到你百度統計的統計代碼</p>
</li>
</ol>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-baidu-tongji.jpg" alt="hexo-theme-butterfly-doc-baidu-tongji.jpg"></p>
<ol start="3">
<li>修改 <code>主題配置文件</code></li>
</ol>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">baidu_analytics:</span> <span class="string">你的代碼</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content"><ol>
<li><p>登錄谷歌分析的<a target="_blank" rel="noopener" href="https://www.google.com/analytics/">官方網站</a></p>
</li>
<li><p>找到你的谷歌分析的跟蹤 ID</p>
</li>
</ol>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-google-analytics.jpg" alt="hexo-theme-butterfly-doc-google-analytics.jpg"></p>
<ol start="3">
<li>修改 <code>主題配置文件</code></li>
</ol>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">google_analytics:</span> <span class="string">你的代碼</span> <span class="comment"># 通常以`UA-`打頭</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content"><ol>
<li>登錄 Cloudflare 分析的<a target="_blank" rel="noopener" href="https://www.cloudflare.com/zh-tw/web-analytics/">官方網站</a></li>
<li>找到 <code>JavaScript 程式碼片段</code></li>
<li>找到你的 <code>token</code></li>
</ol>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-cloudflare-analytics-id.png" alt="hexo-theme-butterfly-docs-cloudflare-analytics-id.png"></p>
<ol start="4">
<li><p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Cloudflare Analytics</span></span><br><span class="line"><span class="comment"># https://www.cloudflare.com/zh-tw/web-analytics/</span></span><br><span class="line"><span class="attr">cloudflare_analytics:</span></span><br></pre></td></tr></table></figure></li>
</ol></div><div class="tab-item-content"><ol>
<li><p>登錄 Clarity 的<a target="_blank" rel="noopener" href="https://clarity.microsoft.com/">官方網站</a></p>
</li>
<li><p>創建 <code>PROJECT</code></p>
</li>
<li><p>找到你的 <code>ID</code></p>
</li>
</ol>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-clarity-id.png" alt="hexo-theme-butterfly-docs-clarity-id.png"></p>
<ol start="4">
<li><p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Microsoft Clarity</span></span><br><span class="line"><span class="comment"># https://clarity.microsoft.com/</span></span><br><span class="line"><span class="attr">microsoft_clarity:</span></span><br></pre></td></tr></table></figure></li>
</ol></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div>

<h2 id="廣告"><a href="#廣告" class="headerlink" title="廣告"></a>廣告</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">谷歌廣告</button><button type="button" class="tab">手動廣告配置</button></div><div class="tab-contents"><div class="tab-item-content active"><p>主題已集成谷歌廣告（自動廣告）</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">google_adsense:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">auto_ads:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">js:</span> <span class="string">https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</span></span><br><span class="line">  <span class="attr">client:</span> <span class="comment"># 填入個人識別碼</span></span><br><span class="line">  <span class="attr">enable_page_level_ads:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-google-adsense1.png" alt="hexo-theme-butterfly-docs-google-adsense1.png"></p></div><div class="tab-item-content"><p>主題預留了三個位置可供插入廣告，分別為主頁文章(每三篇文章出現廣告)&#x2F;aside 公告之後&#x2F;文章頁打賞之後。<br>把 html 代碼填寫到對應的位置</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">ad:</span></span><br><span class="line">  <span class="attr">index:</span></span><br><span class="line">  <span class="attr">aside:</span></span><br><span class="line">  <span class="attr">post:</span></span><br></pre></td></tr></table></figure>

<p>例如:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">index:</span> <span class="string">&lt;ins</span> <span class="string">class=&quot;adsbygoogle&quot;</span> <span class="string">style=&quot;display:block&quot;</span> <span class="string">data-ad-format=&quot;fluid&quot;</span> <span class="string">data-ad-layout-key=&quot;xxxxxxxxxxxx&quot;</span> <span class="string">data-ad-client=&quot;ca-pub-xxxxxxxxxx&quot;</span> <span class="string">data-ad-slot=&quot;xxxxxxxxxx&quot;&gt;&lt;/ins&gt;&lt;script&gt;(adsbygoogle=window.adsbygoogle||[]).push(&#123;&#125;)&lt;/script&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-ad-1.png"></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-ad-2.png"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div>

<h2 id="網站驗證"><a href="#網站驗證" class="headerlink" title="網站驗證"></a>網站驗證</h2><p>如果需要搜索引擎收錄網站，可能需要登錄對應搜索引擎的管理平台進行提交。<br>各自的驗證碼可從各自管理平台拿到</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">site_verification:</span></span><br><span class="line">  <span class="comment"># - name: google-site-verification</span></span><br><span class="line">  <span class="comment">#   content: xxxxxx</span></span><br><span class="line">  <span class="comment"># - name: baidu-site-verification</span></span><br><span class="line">  <span class="comment">#   content: xxxxxxx</span></span><br></pre></td></tr></table></figure>

<h2 id="美化-特效"><a href="#美化-特效" class="headerlink" title="美化&#x2F;特效"></a>美化&#x2F;特效</h2><h3 id="自定義主題色"><a href="#自定義主題色" class="headerlink" title="自定義主題色"></a>自定義主題色</h3><p>可以修改大部分 UI 顏色</p>
<p>修改 <code>主題配置文件</code>，比如：</p>
<div class="note info flat"><p>顏色值必須被雙引號包裹，就像<code>&quot;#000&quot;</code>而不是<code>#000</code>。否則將會在構建的時候報錯！</p>
</div>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">theme_color:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">main:</span> <span class="string">&#x27;#49B1F5&#x27;</span></span><br><span class="line">  <span class="attr">paginator:</span> <span class="string">&#x27;#00c4b6&#x27;</span></span><br><span class="line">  <span class="attr">button_hover:</span> <span class="string">&#x27;#FF7242&#x27;</span></span><br><span class="line">  <span class="attr">text_selection:</span> <span class="string">&#x27;#00c4b6&#x27;</span></span><br><span class="line">  <span class="attr">link_color:</span> <span class="string">&#x27;#99a9bf&#x27;</span></span><br><span class="line">  <span class="attr">meta_color:</span> <span class="string">&#x27;#858585&#x27;</span></span><br><span class="line">  <span class="attr">hr_color:</span> <span class="string">&#x27;#A4D8FA&#x27;</span></span><br><span class="line">  <span class="attr">code_foreground:</span> <span class="string">&#x27;#F47466&#x27;</span></span><br><span class="line">  <span class="attr">code_background:</span> <span class="string">&#x27;rgba(27, 31, 35, .05)&#x27;</span></span><br><span class="line">  <span class="attr">toc_color:</span> <span class="string">&#x27;#00c4b6&#x27;</span></span><br><span class="line">  <span class="attr">blockquote_padding_color:</span> <span class="string">&#x27;#49b1f5&#x27;</span></span><br><span class="line">  <span class="attr">blockquote_background_color:</span> <span class="string">&#x27;#49b1f5&#x27;</span></span><br><span class="line">  <span class="attr">scrollbar_color:</span> <span class="string">&#x27;#49b1f5&#x27;</span></span><br><span class="line">  <span class="attr">meta_theme_color_light:</span> <span class="string">&#x27;ffffff&#x27;</span></span><br><span class="line">  <span class="attr">meta_theme_color_dark:</span> <span class="string">&#x27;#0d0d0d&#x27;</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>main</td>
<td>主題色</td>
</tr>
<tr>
<td>paginator</td>
<td>分頁器顏色</td>
</tr>
<tr>
<td>button_hover</td>
<td>按鈕 hover 顏色</td>
</tr>
<tr>
<td>text_selection</td>
<td>文字選中顏色</td>
</tr>
<tr>
<td>link_color</td>
<td>鏈接顏色</td>
</tr>
<tr>
<td>meta_color</td>
<td>文章元數據顏色</td>
</tr>
<tr>
<td>hr_color</td>
<td>分割線顏色</td>
</tr>
<tr>
<td>code_foreground</td>
<td>代碼前景色</td>
</tr>
<tr>
<td>code_background</td>
<td>代碼背景色</td>
</tr>
<tr>
<td>toc_color</td>
<td>目錄顏色</td>
</tr>
<tr>
<td>blockquote_padding_color</td>
<td>引用邊框顏色</td>
</tr>
<tr>
<td>blockquote_background_color</td>
<td>引用背景色</td>
</tr>
<tr>
<td>scrollbar_color</td>
<td>滾動條顏色</td>
</tr>
<tr>
<td>meta_theme_color_light</td>
<td>light mode 主題色</td>
</tr>
<tr>
<td>meta_theme_color_dark</td>
<td>dark mode 主題色</td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-color_1.png"></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-color_2.png"></p>
<h3 id="文字左右對齊"><a href="#文字左右對齊" class="headerlink" title="文字左右對齊"></a>文字左右對齊</h3><p>可設置文字向兩側對齊，對最後一行無效</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Stretches the lines so that each line has equal width（文字向兩側對齊，對最後一行無效）</span></span><br><span class="line"><span class="attr">text_align_justify:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>text_align_justify: false</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2023/10/text-align-justify-false.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>text_align_justify: true</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2023/10/text-align-justify-true.png"></p>
<h3 id="黑色遮罩"><a href="#黑色遮罩" class="headerlink" title="黑色遮罩"></a>黑色遮罩</h3><p>為了避免圖片過於鮮艷而導致文字無法閲讀，默認為<code>頂部圖</code>和<code>頁腳</code>添加黑色遮罩</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Add a mask to the header and footer</span></span><br><span class="line"><span class="attr">mask:</span></span><br><span class="line">  <span class="attr">header:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">footer:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h3 id="頁面加載動畫-preloader"><a href="#頁面加載動畫-preloader" class="headerlink" title="頁面加載動畫 preloader"></a>頁面加載動畫 preloader</h3><p>當進入網頁時，因為加載速度的問題，可能會導致 top_img 圖片出現斷層顯示，或者網頁加載不全而出現等待時間，開啟 preloader 後，會顯示加載動畫，等頁面加載完，加載動畫會消失。</p>
<p>主題支持 pace.js 的加載動畫，具體可查看 <a target="_blank" rel="noopener" href="https://codebyzach.github.io/pace/">pace.js</a></p>
<p>配置 <code>butterly.yml</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 加載動畫 Loading Animation</span></span><br><span class="line"><span class="attr">preloader:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># source</span></span><br><span class="line">  <span class="comment"># 1. fullpage-loading</span></span><br><span class="line">  <span class="comment"># 2. pace (progress bar)</span></span><br><span class="line">  <span class="attr">source:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment"># pace theme (see https://codebyzach.github.io/pace/)</span></span><br><span class="line">  <span class="attr">pace_css_url:</span></span><br></pre></td></tr></table></figure>

<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>fullpage-loading</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-preloader.gif" alt="hexo-theme-butterfly-docs-preloader.gif"></p>
<h3 id="頁面美化"><a href="#頁面美化" class="headerlink" title="頁面美化"></a>頁面美化</h3><p>會改變 ol、ul、h1-h5 的樣式</p>
<p><code>field</code>配置生效的區域</p>
<ul>
<li><code>post</code> 只在文章頁生效</li>
<li><code>site</code> 在全站生效</li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 美化頁面顯示</span></span><br><span class="line"><span class="attr">beautify:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">site</span> <span class="comment"># site/post</span></span><br><span class="line">  <span class="attr">title-prefix-icon:</span> <span class="string">&#x27;\f0c1&#x27;</span></span><br><span class="line">  <span class="attr">title-prefix-icon-color:</span> <span class="string">&#x27;#F47466&#x27;</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>enable</td>
<td>是否開啟美化</td>
</tr>
<tr>
<td>field</td>
<td>美化的區域</td>
</tr>
<tr>
<td>title-prefix-icon</td>
<td>標題前綴的 icon</td>
</tr>
<tr>
<td>title-prefix-icon-color</td>
<td>標題前綴的 icon 的顏色</td>
</tr>
</tbody></table>
<p><code>title-prefix-icon</code>填寫的是fontawesome的icon的Unicode數。<br><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-fontwesome-unicode.png" alt="hexo-theme-butterfly-doc-fontwesome-unicode.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>未開啟美化</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-beautify.png" alt="hexo-theme-butterfly-doc-post-beautify.png"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>開啟美化</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-beautif.png" alt="hexo-theme-butterfly-doc-post-beautif.png"></p>
<h3 id="自定義字體和字體大小"><a href="#自定義字體和字體大小" class="headerlink" title="自定義字體和字體大小"></a>自定義字體和字體大小</h3><h4 id="全局字體"><a href="#全局字體" class="headerlink" title="全局字體"></a>全局字體</h4><p>可自行設置字體的<code>font-family</code></p>
<p><strong>如不需要配置，請留空</strong></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Global font settings</span></span><br><span class="line"><span class="comment"># Don&#x27;t modify the following settings unless you know how they work (非必要不要修改)</span></span><br><span class="line"><span class="attr">font:</span></span><br><span class="line">  <span class="attr">global-font-size:</span></span><br><span class="line">  <span class="attr">code-font-size:</span></span><br><span class="line">  <span class="attr">font-family:</span> <span class="string">-apple-system,</span> <span class="string">BlinkMacSystemFont,</span> <span class="string">&quot;Segoe UI&quot;</span><span class="string">,</span> <span class="string">&quot;Helvetica Neue&quot;</span><span class="string">,</span> <span class="string">Lato,</span> <span class="string">Roboto,</span> <span class="string">&quot;PingFang SC&quot;</span><span class="string">,</span> <span class="string">&quot;Microsoft JhengHei&quot;</span><span class="string">,</span> <span class="string">&quot;Microsoft YaHei&quot;</span><span class="string">,</span> <span class="string">sans-serif</span></span><br><span class="line">  <span class="attr">code-font-family:</span> <span class="string">consolas,</span> <span class="string">Menlo,</span> <span class="string">&quot;PingFang SC&quot;</span><span class="string">,</span> <span class="string">&quot;Microsoft JhengHei&quot;</span><span class="string">,</span> <span class="string">&quot;Microsoft YaHei&quot;</span><span class="string">,</span> <span class="string">sans-serif</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>global-font-size</td>
<td>全局字體大小</td>
</tr>
<tr>
<td>code-font-size</td>
<td>代碼字體大小</td>
</tr>
<tr>
<td>font-family</td>
<td>全局字體</td>
</tr>
<tr>
<td>code-font-family</td>
<td>代碼字體</td>
</tr>
</tbody></table>
<h4 id="Blog-標題字體"><a href="#Blog-標題字體" class="headerlink" title="Blog 標題字體"></a>Blog 標題字體</h4><p>可自行設置字體的<code>font-family</code><br><strong>如不需要配置，請留空。</strong><br><strong>如不需要使用網絡字體，只需要把 font_link 留空就行</strong></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Font settings for the site title and site subtitle</span></span><br><span class="line"><span class="comment"># 左上角網站名字 主頁居中網站名字</span></span><br><span class="line"><span class="attr">blog_title_font:</span></span><br><span class="line">  <span class="attr">font_link:</span> <span class="string">https://fonts.googleapis.com/css?family=Titillium+Web&amp;display=swap</span></span><br><span class="line">  <span class="attr">font-family:</span> <span class="string">Titillium</span> <span class="string">Web,</span> <span class="string">&#x27;PingFang SC&#x27;</span><span class="string">,</span> <span class="string">&#x27;Hiragino Sans GB&#x27;</span><span class="string">,</span> <span class="string">&#x27;Microsoft JhengHei&#x27;</span><span class="string">,</span> <span class="string">&#x27;Microsoft YaHei&#x27;</span><span class="string">,</span> <span class="string">sans-serif</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>font_link</td>
<td>網絡字體的連結</td>
</tr>
<tr>
<td>font-family</td>
<td>網站標題字體</td>
</tr>
</tbody></table>
<h3 id="打字效果"><a href="#打字效果" class="headerlink" title="打字效果"></a>打字效果</h3><p>打字效果<a target="_blank" rel="noopener" href="https://github.com/disjukr/activate-power-mode">activate-power-mode</a></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Typewriter Effect (打字效果)</span></span><br><span class="line"><span class="comment"># https://github.com/disjukr/activate-power-mode</span></span><br><span class="line"><span class="attr">activate_power_mode:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">colorful:</span> <span class="literal">true</span> <span class="comment"># open particle animation (冒光特效)</span></span><br><span class="line">  <span class="attr">shake:</span> <span class="literal">true</span> <span class="comment">#  open shake (抖動特效)</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>enable</td>
<td>是否開啟打字效果</td>
</tr>
<tr>
<td>colorful</td>
<td>是否開啟冒光特效</td>
</tr>
<tr>
<td>shake</td>
<td>是否開啟抖動特效</td>
</tr>
<tr>
<td>mobile</td>
<td>是否在移動端開啟打字效果</td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-type-animation.gif" alt="hexo-theme-butterfly-doc-type-animation.gif"></p>
<h3 id="背景特效"><a href="#背景特效" class="headerlink" title="背景特效"></a>背景特效</h3><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">靜止綵帶</button><button type="button" class="tab">動態綵帶</button><button type="button" class="tab">canvas-nest</button></div><div class="tab-contents"><div class="tab-item-content active"><p>好看的綵帶背景，可設置每次刷新更換綵帶，或者每次點擊更換綵帶</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">canvas_ribbon:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># The size of ribbon</span></span><br><span class="line">  <span class="attr">size:</span> <span class="number">150</span></span><br><span class="line">  <span class="comment"># The opacity of ribbon (0 ~ 1)</span></span><br><span class="line">  <span class="attr">alpha:</span> <span class="number">0.6</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">-1</span></span><br><span class="line">  <span class="attr">click_to_change:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>enable</td>
<td>是否開啟綵帶特效</td>
</tr>
<tr>
<td>size</td>
<td>綵帶的大小</td>
</tr>
<tr>
<td>alpha</td>
<td>綵帶的透明度</td>
</tr>
<tr>
<td>zIndex</td>
<td>綵帶的層級</td>
</tr>
<tr>
<td>click_to_change</td>
<td>點擊更換綵帶</td>
</tr>
<tr>
<td>mobile</td>
<td>手機端是否顯示綵帶</td>
</tr>
</tbody></table>
<p>相關配置可查看<a target="_blank" rel="noopener" href="https://github.com/hustcc/ribbon.js">canvas_ribbon</a></p>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-canvas-ribbon.png"></p></div><div class="tab-item-content"><p>好看的綵帶背景，會飄動</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">canvas_fluttering_ribbon:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span> <span class="comment"># false 手機端不顯示 true 手機端顯示</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-canvas_fluttering_ribbon.gif"></p></div><div class="tab-item-content"><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">canvas_nest:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Color of lines, default: &#x27;0,0,0&#x27;; RGB values: (R,G,B).(<span class="doctag">note:</span> use &#x27;,&#x27; to separate.)</span></span><br><span class="line">  <span class="attr">color:</span> <span class="string">&#x27;0,0,255&#x27;</span></span><br><span class="line">  <span class="comment"># The opacity of line (0~1)</span></span><br><span class="line">  <span class="attr">opacity:</span> <span class="number">0.7</span></span><br><span class="line">  <span class="comment"># The z-index property of the background</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">-1</span></span><br><span class="line">  <span class="comment"># The number of lines</span></span><br><span class="line">  <span class="attr">count:</span> <span class="number">99</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>enable</td>
<td>是否開啟綵帶特效</td>
</tr>
<tr>
<td>color</td>
<td>綵帶的顏色</td>
</tr>
<tr>
<td>opacity</td>
<td>綵帶的透明度</td>
</tr>
<tr>
<td>zIndex</td>
<td>綵帶的層級</td>
</tr>
<tr>
<td>count</td>
<td>綵帶的條數</td>
</tr>
<tr>
<td>mobile</td>
<td>手機端是否顯示綵帶</td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-canvas_nes.gif"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div>

<h3 id="鼠標點擊效果"><a href="#鼠標點擊效果" class="headerlink" title="鼠標點擊效果"></a>鼠標點擊效果</h3><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active"><i class="fas fa-fire-alt"></i>煙花</button><button type="button" class="tab"><i class="fas fa-heart"></i>愛心</button><button type="button" class="tab"><i class="fab fa-amilia"></i>文字</button></div><div class="tab-contents"><div class="tab-item-content active"><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">fireworks:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">9999</span> <span class="comment"># -1 or 9999</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>enable</td>
<td>是否開啟煙花特效</td>
</tr>
<tr>
<td>zIndex</td>
<td>煙花的層級， <code>-1</code> 代表煙火效果在底部 &#x2F;</td>
</tr>
<tr>
<td><code>9999</code> 代表煙火效果在前面</td>
<td></td>
</tr>
<tr>
<td>mobile</td>
<td>手機端是否顯示煙花</td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-firewall.gif" alt="hexo-theme-butterfly-doc-firewall.gif"></p></div><div class="tab-item-content"><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 點擊出現愛心</span></span><br><span class="line"><span class="attr">click_heart:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/click_heart.gif" alt="click_heart.gif"></p></div><div class="tab-item-content"><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 點擊出現文字，文字可自行修改</span></span><br><span class="line"><span class="attr">ClickShowText:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">text:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">I</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">LOVE</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">YOU</span></span><br><span class="line">  <span class="attr">fontSize:</span> <span class="string">15px</span></span><br><span class="line">  <span class="attr">random:</span> <span class="literal">false</span> <span class="comment"># 文字隨機顯示</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>enable</td>
<td>是否開啟文字特效</td>
</tr>
<tr>
<td>text</td>
<td>文字內容</td>
</tr>
<tr>
<td>fontSize</td>
<td>文字大小</td>
</tr>
<tr>
<td>random</td>
<td>文字隨機顯示</td>
</tr>
<tr>
<td>mobile</td>
<td>手機端是否顯示文字</td>
</tr>
</tbody></table>
<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/ClickShowText.gif" alt="ClickShowText.gif"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div>

<h2 id="圖片大圖查看模式"><a href="#圖片大圖查看模式" class="headerlink" title="圖片大圖查看模式"></a>圖片大圖查看模式</h2><div class="note info flat"><p>如果你並不想為某張圖片添加大圖查看模式，你可以使用 html 格式引用圖片，併為圖片添加 <code>no-lightbox</code> class 名</p>
</div>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Choose: fancybox / medium_zoom</span></span><br><span class="line"><span class="comment"># https://github.com/francoischalifour/medium-zoom</span></span><br><span class="line"><span class="comment"># https://fancyapps.com/fancybox/</span></span><br><span class="line"><span class="comment"># Leave it empty if you don&#x27;t need lightbox</span></span><br><span class="line"><span class="attr">lightbox:</span></span><br></pre></td></tr></table></figure>

<p>可配置 <code>fancybox</code> 或 <code>medium_zoom</code> 來啟用圖片大圖查看模式<br>不需要大圖查看模式時，請留空</p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>FancyBox</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/fancybox.gif" alt="fancybox.gif"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Medium Zoom</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/medium_zoom.gif" alt="medium_zoom.gif"></p>
<h2 id="標簽外掛"><a href="#標簽外掛" class="headerlink" title="標簽外掛"></a>標簽外掛</h2><p>具體可查看 <a target="_blank" rel="noopener" href="https://butterfly.js.org/posts/ceeb73f/">標簽外掛</a></p>
<h2 id="Mermaid"><a href="#Mermaid" class="headerlink" title="Mermaid"></a>Mermaid</h2><p>主題支持 Mermaid.js，可以在文章中使用 Mermaid.js 繪製流程圖、序列圖等。</p>
<p>配置：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Mermaid</span></span><br><span class="line"><span class="comment"># https://github.com/mermaid-js/mermaid</span></span><br><span class="line"><span class="attr">mermaid:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Write Mermaid diagrams using code blocks</span></span><br><span class="line">  <span class="attr">code_write:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># built-in themes: default / forest / dark / neutral</span></span><br><span class="line">  <span class="attr">theme:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">default</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">dark</span></span><br></pre></td></tr></table></figure>

<h3 id="書寫方法"><a href="#書寫方法" class="headerlink" title="書寫方法"></a>書寫方法</h3><p>主題支持兩種書寫方法</p>
<h4 id="標簽外挂"><a href="#標簽外挂" class="headerlink" title="標簽外挂"></a>標簽外挂</h4><p>你可以使用標簽外挂的方式來使用 Mermaid.js<br>具體可查看 <a target="_blank" rel="noopener" href="https://butterfly.js.org/posts/ceeb73f/#Mermaid">Mermaid 標簽外掛</a></p>
<h4 id="代碼塊書寫"><a href="#代碼塊書寫" class="headerlink" title="代碼塊書寫"></a>代碼塊書寫</h4><p>你可以使用代碼塊的方式來使用 Mermaid.js</p>
<ol>
<li><p>hexo 版本需要 7.0 或以上</p>
</li>
<li><p>hexo 的配置文件 要添加 <code>exclude_languages: [&#39;mermaid&#39;]</code></p>
 <figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">syntax_highlighter:</span> <span class="string">&#x27;highlight.js&#x27;</span></span><br><span class="line"><span class="attr">highlight:</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">auto_detect:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">tab_replace:</span> <span class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="attr">wrap:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hljs:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">exclude_languages:</span> [<span class="string">&#x27;mermaid&#x27;</span>]</span><br><span class="line"><span class="attr">prismjs:</span></span><br><span class="line">  <span class="attr">preprocess:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">tab_replace:</span> <span class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="attr">exclude_languages:</span> [<span class="string">&#x27;mermaid&#x27;</span>]</span><br></pre></td></tr></table></figure>
</li>
<li><p>butterfly的配置文件中 mermaid 的 code_write 设为 true</p>
</li>
</ol>
<blockquote>
<p>例子</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">graph TD;</span><br><span class="line">  A--&gt;B;</span><br><span class="line">  A--&gt;C;</span><br><span class="line">  B--&gt;D;</span><br><span class="line">  C--&gt;D;</span><br></pre></td></tr></table></figure>

<h2 id="Pjax"><a href="#Pjax" class="headerlink" title="Pjax"></a>Pjax</h2><p>當用户點擊鏈接，通過 ajax 更新頁面需要變化的部分，然後使用 HTML5 的 pushState 修改瀏覽器的 URL 地址。</p>
<p>這樣可以不用重複加載相同的資源（css&#x2F;js）， 從而提升網頁的加載速度。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">pjax:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Exclude the specified pages from pjax, such as &#x27;/music/&#x27;</span></span><br><span class="line">  <span class="attr">exclude:</span></span><br><span class="line">    <span class="comment"># - /xxxxxx/</span></span><br></pre></td></tr></table></figure>

<div class="note info flat"><p>對於一些第三方插件，有些並不支持 pjax 。<br>你可以把<strong>網頁</strong>加入到 <code>exclude</code> 裏，這個網頁會被 pjax 排除在外。<br>點擊該網頁會重新加載網站</p>
<p>使用 pjax 後，一些自己 DIY 的 js 可能會無效，跳轉頁面時需要重新調用，請參考<a target="_blank" rel="noopener" href="https://github.com/MoOx/pjax">Pjax 文檔</a><br>使用 pjax 後，一些個別頁面加載的 js&#x2F;css，將會改為所有頁面都加載</p>
</div>

<h2 id="Snackbar-彈窗"><a href="#Snackbar-彈窗" class="headerlink" title="Snackbar 彈窗"></a>Snackbar 彈窗</h2><p>Snackbar 彈窗,根據自己愛好開啟</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Snackbar 彈窗</span></span><br><span class="line"><span class="comment"># https://github.com/polonel/SnackBar</span></span><br><span class="line"><span class="comment"># position 彈窗位置</span></span><br><span class="line"><span class="comment"># 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right</span></span><br><span class="line"><span class="attr">snackbar:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">bottom-left</span></span><br><span class="line">  <span class="attr">bg_light:</span> <span class="string">&#x27;#49b1f5&#x27;</span> <span class="comment">#light mode時彈窗背景</span></span><br><span class="line">  <span class="attr">bg_dark:</span> <span class="string">&#x27;#2d3035&#x27;</span> <span class="comment">#dark mode時彈窗背景</span></span><br></pre></td></tr></table></figure>

<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>未開啟 Snackbar</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/snackbar_false.gif"></p>
<div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>開啟 Snackbar</p>
</div>

<p><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/snackbar_true.gif"></p>
<h2 id="Instantpage"><a href="#Instantpage" class="headerlink" title="Instantpage"></a>Instantpage</h2><p>當鼠標懸停到鏈接上超過 65 毫秒時，Instantpage 會對該鏈接進行預加載，可以提升訪問速度。</p>
<p>修改配置文件</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># https://instant.page/</span></span><br><span class="line"><span class="comment"># prefetch (預加載)</span></span><br><span class="line"><span class="attr">instantpage:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h2 id="Pangu"><a href="#Pangu" class="headerlink" title="Pangu"></a>Pangu</h2><div class="note info flat"><p>如果你跟我一樣，每次看到網頁上的中文字和英文、數字、符號擠在一塊，就會坐立難安，忍不住想在它們之間加個空格。這個外掛正是你在網路世界走跳所需要的東西，它會自動替你在網頁中所有的中文字和半形的英文、數字、符號之間插入空白。</p>
</div>

<p>修改配置文件</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># https://github.com/vinta/pangu.js</span></span><br><span class="line"><span class="comment"># Insert a space between Chinese character and English character (中英文之間添加空格)</span></span><br><span class="line"><span class="attr">pangu:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">post</span> <span class="comment"># site/post</span></span><br></pre></td></tr></table></figure>

<p><code>field</code>只支持兩個參數，<code>post</code>(只在文章頁生效)和<code>site</code>(全站生效)</p>
<h2 id="PWA"><a href="#PWA" class="headerlink" title="PWA"></a>PWA</h2><p>要為<code>Butterfly</code>配上 PWA 特性, 你需要如下幾個步驟:</p>
<ol>
<li><p>打開 hexo 工作目錄</p>
</li>
<li><p><code>npm install hexo-offline --save</code> 或者 <code>yarn add hexo-offline</code></p>
</li>
<li><p>在根目錄創建 <code>hexo-offline.config.cjs</code> 文件，並增加以下內容。</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// offline config passed to workbox-build.</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">globPatterns</span>: [<span class="string">&#x27;**/*.&#123;js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2&#125;&#x27;</span>],</span><br><span class="line">  <span class="comment">// 靜態文件合集，如果你的站點使用了例如 webp 格式的文件，請將文件類型添加進去。</span></span><br><span class="line">  <span class="attr">globDirectory</span>: <span class="string">&#x27;public&#x27;</span>,</span><br><span class="line">  <span class="attr">swDest</span>: <span class="string">&#x27;public/service-worker.js&#x27;</span>,</span><br><span class="line">  <span class="attr">maximumFileSizeToCacheInBytes</span>: <span class="number">10485760</span>, <span class="comment">// 緩存的最大文件大小，以字節為單位。</span></span><br><span class="line">  <span class="attr">skipWaiting</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">clientsClaim</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">runtimeCaching</span>: [</span><br><span class="line">    <span class="comment">// 如果你需要加載 CDN 資源，請配置該選項，如果沒有，可以不配置。</span></span><br><span class="line">    <span class="comment">// CDNs - should be CacheFirst, since they should be used specific versions so should not change</span></span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">urlPattern</span>: <span class="regexp">/^https:\/\/cdn\.example\.com\/.*/</span>, <span class="comment">// 可替換成你的 URL</span></span><br><span class="line">      <span class="attr">handler</span>: <span class="string">&#x27;CacheFirst&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>更多內容請查看 <a target="_blank" rel="noopener" href="https://github.com/JLHwung/hexo-offline">hexo-offline</a>的官方文檔</p>
<ol start="4">
<li>在<code>主題配置文件</code>中開啟 pwa 選項。</li>
</ol>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">pwa:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">manifest:</span> <span class="string">/img/pwa/manifest.json</span></span><br><span class="line">  <span class="attr">apple_touch_icon:</span> <span class="string">/img/pwa/apple-touch-icon.png</span></span><br><span class="line">  <span class="attr">favicon_32_32:</span> <span class="string">/img/pwa/32.png</span></span><br><span class="line">  <span class="attr">favicon_16_16:</span> <span class="string">/img/pwa/16.png</span></span><br><span class="line">  <span class="attr">mask_icon:</span> <span class="string">/img/pwa/safari-pinned-tab.svg</span></span><br></pre></td></tr></table></figure>

<ol start="5">
<li>在創建<code>source/</code>目錄中創建<code>manifest.json</code>文件。</li>
</ol>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;string&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;short_name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Junzhou&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;theme_color&quot;</span><span class="punctuation">:</span> <span class="string">&quot;#49b1f5&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;background_color&quot;</span><span class="punctuation">:</span> <span class="string">&quot;#49b1f5&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;display&quot;</span><span class="punctuation">:</span> <span class="string">&quot;standalone&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;scope&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;start_url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;icons&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/36.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;36x36&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/48.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;48x48&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/72.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;72x72&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/96.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;96x96&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/144.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;144x144&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/192.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;192x192&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/512.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;512x512&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;splash_pages&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">null</span></span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<p>你也可以通過 <a target="_blank" rel="noopener" href="https://app-manifest.firebaseapp.com/">Web App Manifest</a>快速創建<code>manifest.json</code>。（Web App Manifest 要求至少包含一個 512*512 像素的圖標）</p>
<ol start="6">
<li><p>可以通過<code>Chrome</code>插件<code>Lighthouse</code>檢查 PWA 配置是否生效以及配置是否正確。</p>
<ul>
<li>打開博客頁面</li>
<li>啟動<code>Lighthouse</code>插件 (<code>Lighthouse</code>插件要求至少包含一個 512*512 像素的圖標)</li>
</ul>
</li>
</ol>
<p>關於 PWA（漸進式增強 Web 應用）的更多內容請參閲 <a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/lighthouse/audits/address-bar">Google Tools for Web Developers</a></p>
<h2 id="Open-Graph"><a href="#Open-Graph" class="headerlink" title="Open Graph"></a>Open Graph</h2><p>在 <code>head</code> 裏增加一些 meta 資料，例如縮略圖、標題、時間等等。當你分享網頁到一些平台時，平台會讀取 Open Graph 的內容，展示縮略圖，標題等等信息。</p>
<p>修改配置文件</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Open graph meta tags</span></span><br><span class="line"><span class="comment"># https://hexo.io/docs/helpers#open-graph</span></span><br><span class="line"><span class="attr">Open_Graph_meta:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line">    <span class="comment"># twitter_card:</span></span><br><span class="line">    <span class="comment"># twitter_image:</span></span><br><span class="line">    <span class="comment"># twitter_id:</span></span><br><span class="line">    <span class="comment"># twitter_site:</span></span><br><span class="line">    <span class="comment"># google_plus:</span></span><br><span class="line">    <span class="comment"># fb_admins:</span></span><br><span class="line">    <span class="comment"># fb_app_id:</span></span><br></pre></td></tr></table></figure>

<h2 id="CSS-前綴"><a href="#CSS-前綴" class="headerlink" title="CSS 前綴"></a>CSS 前綴</h2><p>有些 CSS 並不是所有瀏覽器都支持，需要增加對應的前綴才會生效。</p>
<p>開啟 <code>css_prefix</code> 後，會自動為一些 CSS 增加前綴。（會增加 20%的體積）</p>
<p>修改配置文件</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Add the vendor prefixes to ensure compatibility</span></span><br><span class="line"><span class="attr">css_prefix:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h2 id="Inject"><a href="#Inject" class="headerlink" title="Inject"></a>Inject</h2><div class="note pink icon-padding flat"><i class="note-icon fa-solid fa-bell"></i><p>2.3.0 以上支持</p>
</div>

<p>如想添加額外的 js&#x2F;css&#x2F;meta 等等東西，可以在 Inject 裏添加，支持添加到 head(<code>&lt;/body&gt;</code>標籤之前)和 bottom(<code>&lt;/html&gt;</code>標籤之前)。</p>
<p>請注意：以標準的 html 格式添加內容</p>
<p>例如</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">  	<span class="bullet">-</span> <span class="string">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;/self.css&quot;&gt;</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">  	<span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">src=&quot;xxxx&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure>

<p><em>留意:</em> 如果你的網站根目錄不是’&#x2F;‘,使用本地圖片時，需加上你的根目錄。<br>例如：網站是 <code>https://yoursite.com/blog</code>,引用<code>css/xx.css</code>，則設置為<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;/blog/css/xx.css&quot;&gt;</code></p>
<h2 id="CDN"><a href="#CDN" class="headerlink" title="CDN"></a>CDN</h2><p>配置文件中最後一部分 CDN，裏面是主題所引用到的文件，可自行配置 CDN。（非必要請勿修改，配置後請確認鏈接是否能訪問）</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># CDN Settings</span></span><br><span class="line"><span class="comment"># Don&#x27;t modify the following settings unless you know how they work</span></span><br><span class="line"><span class="attr">CDN:</span></span><br><span class="line">  <span class="comment"># The CDN provider for internal and third-party scripts</span></span><br><span class="line">  <span class="comment"># Options for both: local/jsdelivr/unpkg/cdnjs/custom</span></span><br><span class="line">  <span class="comment"># <span class="doctag">Note:</span> Dev version can only use &#x27;local&#x27; for internal scripts</span></span><br><span class="line">  <span class="comment"># <span class="doctag">Note:</span> When setting third-party scripts to &#x27;local&#x27;, you need to install hexo-butterfly-extjs</span></span><br><span class="line">  <span class="attr">internal_provider:</span> <span class="string">local</span></span><br><span class="line">  <span class="attr">third_party_provider:</span> <span class="string">jsdelivr</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Add version number to url, true or false</span></span><br><span class="line">  <span class="attr">version:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Custom format</span></span><br><span class="line">  <span class="comment"># For example: https://cdn.staticfile.org/$&#123;cdnjs_name&#125;/$&#123;version&#125;/$&#123;min_cdnjs_file&#125;</span></span><br><span class="line">  <span class="attr">custom_format:</span></span><br><span class="line"></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line">    <span class="comment"># abcjs_basic_js:</span></span><br><span class="line">    <span class="comment"># activate_power_mode:</span></span><br><span class="line">    <span class="comment"># algolia_js:</span></span><br><span class="line">    <span class="comment"># algolia_search:</span></span><br><span class="line">    <span class="comment"># aplayer_css:</span></span><br><span class="line">    <span class="comment"># aplayer_js:</span></span><br><span class="line">    <span class="comment"># artalk_css:</span></span><br><span class="line">    <span class="comment"># artalk_js:</span></span><br><span class="line">    <span class="comment"># blueimp_md5:</span></span><br><span class="line">    <span class="comment"># busuanzi:</span></span><br><span class="line">    <span class="comment"># canvas_fluttering_ribbon:</span></span><br><span class="line">    <span class="comment"># canvas_nest:</span></span><br><span class="line">    <span class="comment"># canvas_ribbon:</span></span><br><span class="line">    <span class="comment"># click_heart:</span></span><br><span class="line">    <span class="comment"># clickShowText:</span></span><br><span class="line">    <span class="comment"># disqusjs:</span></span><br><span class="line">    <span class="comment"># disqusjs_css:</span></span><br><span class="line">    <span class="comment"># docsearch_css:</span></span><br><span class="line">    <span class="comment"># docsearch_js:</span></span><br><span class="line">    <span class="comment"># egjs_infinitegrid:</span></span><br><span class="line">    <span class="comment"># fancybox:</span></span><br><span class="line">    <span class="comment"># fancybox_css:</span></span><br><span class="line">    <span class="comment"># fireworks:</span></span><br><span class="line">    <span class="comment"># fontawesome:</span></span><br><span class="line">    <span class="comment"># gitalk:</span></span><br><span class="line">    <span class="comment"># gitalk_css:</span></span><br><span class="line">    <span class="comment"># giscus:</span></span><br><span class="line">    <span class="comment"># instantpage:</span></span><br><span class="line">    <span class="comment"># instantsearch:</span></span><br><span class="line">    <span class="comment"># katex:</span></span><br><span class="line">    <span class="comment"># katex_copytex:</span></span><br><span class="line">    <span class="comment"># lazyload:</span></span><br><span class="line">    <span class="comment"># local_search:</span></span><br><span class="line">    <span class="comment"># main:</span></span><br><span class="line">    <span class="comment"># main_css:</span></span><br><span class="line">    <span class="comment"># mathjax:</span></span><br><span class="line">    <span class="comment"># medium_zoom:</span></span><br><span class="line">    <span class="comment"># mermaid:</span></span><br><span class="line">    <span class="comment"># meting_js:</span></span><br><span class="line">    <span class="comment"># pangu:</span></span><br><span class="line">    <span class="comment"># prismjs_autoloader:</span></span><br><span class="line">    <span class="comment"># prismjs_js:</span></span><br><span class="line">    <span class="comment"># prismjs_lineNumber_js:</span></span><br><span class="line">    <span class="comment"># pjax:</span></span><br><span class="line">    <span class="comment"># sharejs:</span></span><br><span class="line">    <span class="comment"># sharejs_css:</span></span><br><span class="line">    <span class="comment"># snackbar:</span></span><br><span class="line">    <span class="comment"># snackbar_css:</span></span><br><span class="line">    <span class="comment"># translate:</span></span><br><span class="line">    <span class="comment"># twikoo:</span></span><br><span class="line">    <span class="comment"># typed:</span></span><br><span class="line">    <span class="comment"># utils:</span></span><br><span class="line">    <span class="comment"># valine:</span></span><br><span class="line">    <span class="comment"># waline_css:</span></span><br><span class="line">    <span class="comment"># waline_js:</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>internal_provider</td>
<td>主題內部文件<br />可選 local&#x2F;jsdelivr&#x2F;unpkg&#x2F;cdnjs&#x2F;custom<br />lcoal 為本地加載，custom 為自定義格式，需配置 <code>custom_format</code><br /><strong>注意:</strong> 如果使用的是 Dev 版，只能設置為 local</td>
</tr>
<tr>
<td>third_party_provider</td>
<td>第三方文件<br />可選 local&#x2F;jsdelivr&#x2F;unpkg&#x2F;cdnjs&#x2F;custom<br />lcoal 為本地加載，custom 為自定義格式，需配置 <code>custom_format</code><br /><strong>注意:</strong> 如果你選擇 local 需要安裝 <code>hexo-butterfly-extjs</code>插件</td>
</tr>
<tr>
<td>version</td>
<td>true&#x2F;false 為 cdn 加上指定版本號</td>
</tr>
<tr>
<td>custom_format</td>
<td>自定義格式</td>
</tr>
<tr>
<td>option</td>
<td>你可以在這裏更換部分文件,會覆蓋原有的配置</td>
</tr>
</tbody></table>
<h3 id="version"><a href="#version" class="headerlink" title="version"></a>version</h3><p>如需修改版本號，可修改<code>主題目錄</code>的 ‘plugins.yml’ 中對應插件的 version</p>
<p>請確保你修改的版本號，你所使用的 cdn 有<strong>收錄</strong></p>
<h3 id="custom-format"><a href="#custom-format" class="headerlink" title="custom_format"></a>custom_format</h3><p>提供以下參數</p>
<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>name</td>
<td>npm 上的包名</td>
</tr>
<tr>
<td>file</td>
<td>npm 上的文件路徑</td>
</tr>
<tr>
<td>min_file</td>
<td>npm 上的文件路徑（壓縮過的文件）</td>
</tr>
<tr>
<td>cdnjs_name</td>
<td>cdnjs 上的包名</td>
</tr>
<tr>
<td>cdnjs_file</td>
<td>cdnjs 上的文件路徑</td>
</tr>
<tr>
<td>min_cdnjs_file</td>
<td>cdnjs 上的文件路徑（壓縮過的文件）</td>
</tr>
<tr>
<td>version</td>
<td>插件版本號</td>
</tr>
</tbody></table>
<p>部分可用的第三方 CDN 列表</p>
<div class="note info flat"><p>請確保你選擇的 CDN 有收錄主題使用的第三方插件</p>
</div>

<table>
<thead>
<tr>
<th>提供商</th>
<th>格式</th>
<th>備註</th>
</tr>
</thead>
<tbody><tr>
<td><a target="_blank" rel="noopener" href="https://www.staticfile.org/">Staticfile（七牛雲）</a></td>
<td><a target="_blank" rel="noopener" href="https://cdn.staticfile.org/$%7Bcdnjs_name%7D/$%7Bversion%7D/$%7Bmin_cdnjs_file%7D">https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}</a></td>
<td>同步 cdnjs</td>
</tr>
<tr>
<td><a target="_blank" rel="noopener" href="https://www.bootcdn.cn/">BootCDN</a></td>
<td><a target="_blank" rel="noopener" href="https://cdn.bootcdn.net/ajax/libs/$%7Bcdnjs_name%7D/$%7Bversion%7D/$%7Bmin_cdnjs_file%7D">https://cdn.bootcdn.net/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file}</a></td>
<td>同步 cdnjs</td>
</tr>
<tr>
<td>Elemecdn</td>
<td>最新版本： <a target="_blank" rel="noopener" href="https://npm.elemecdn.com/$%7Bname%7D@latest/$%7Bfile%7D">https://npm.elemecdn.com/${name}@latest/${file}</a><br />指定版本： <a target="_blank" rel="noopener" href="https://npm.elemecdn.com/$%7Bname%7D@$%7Bversion%7D/$%7Bfile%7D">https://npm.elemecdn.com/${name}@${version}/${file}</a></td>
<td>同步 npm</td>
</tr>
</tbody></table>
<a class="btn-beautify block red right larger" href="/posts/d9078dbf/" title="⚔️ Butterfly-文檔-四-標簽外掛"><i class="far fa-hand-point-right"></i><span>⚔️ Butterfly-文檔-四-標簽外掛</span></a>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://veryXing.github.io">xing</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://veryxing.github.io/article/a2c7de2.html">https://veryxing.github.io/article/a2c7de2.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来源 <a href="https://veryXing.github.io" target="_blank">Xing's Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E6%95%99%E7%A8%8B/">教程</a><a class="post-meta__tags" href="/tags/Hexo/">Hexo</a><a class="post-meta__tags" href="/tags/%E4%B8%BB%E9%A1%8C/">主題</a><a class="post-meta__tags" href="/tags/butterfly/">butterfly</a></div><div class="post-share"><div class="social-share" data-image="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-03-cover.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><a class="prev-post pull-left" href="/article/d9078dbf.html" title="Butterfly 文檔(四) 標簽外挂"><img class="cover" src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/Butterfly-docs-04-cover.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Butterfly 文檔(四) 標簽外挂</div></div></a><a class="next-post pull-right" href="/article/6b50bc45.html" title="Butterfly 文檔(二) 主題頁面"><img class="cover" src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/Butterfly-docs-02-cover.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Butterfly 文檔(二) 主題頁面</div></div></a></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><a href="/article/70021e6e.html" title="Butterfly 文檔(一) 快速開始"><img class="cover" src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-01-cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-05-28</div><div class="title">Butterfly 文檔(一) 快速開始</div></div></a><a href="/article/405e153.html" title="Butterfly 文檔(五) 主題問答"><img class="cover" src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-05-cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-05-28</div><div class="title">Butterfly 文檔(五) 主題問答</div></div></a><a href="/article/6b50bc45.html" title="Butterfly 文檔(二) 主題頁面"><img class="cover" src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/Butterfly-docs-02-cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-05-28</div><div class="title">Butterfly 文檔(二) 主題頁面</div></div></a><a href="/article/fa36e355.html" title="Butterfly 文檔(六) 進階教程"><img class="cover" src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-06-cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-05-28</div><div class="title">Butterfly 文檔(六) 進階教程</div></div></a><a href="/article/3bd898ff.html" title="Butterfly添加全局吸底Aplayer教程"><img class="cover" src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/Butterfly-add-aplayer-cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-07-31</div><div class="title">Butterfly添加全局吸底Aplayer教程</div></div></a><a href="/article/d9078dbf.html" title="Butterfly 文檔(四) 標簽外挂"><img class="cover" src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/Butterfly-docs-04-cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-05-28</div><div class="title">Butterfly 文檔(四) 標簽外挂</div></div></a></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info is-center"><div class="avatar-img"><img src= "/images/2.gif" data-lazy-src="/img/butterfly-icon.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info-name">xing</div><div class="author-info-description"></div><div class="site-data"><a href="/archives/"><div class="headline">文章</div><div class="length-num">59</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">55</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">9</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/veryXing"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E9%80%9F%E8%AE%80"><span class="toc-number">1.</span> <span class="toc-text">配置文件速讀</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AA%9E%E8%A8%80"><span class="toc-number">2.</span> <span class="toc-text">語言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B6%B2%E7%AB%99%E8%B3%87%E6%96%99"><span class="toc-number">3.</span> <span class="toc-text">網站資料</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%8E%E8%88%AA"><span class="toc-number">4.</span> <span class="toc-text">導航</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%83%E6%95%B8%E8%A8%AD%E7%BD%AE"><span class="toc-number">4.1.</span> <span class="toc-text">參數設置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%AE%E9%8C%84"><span class="toc-number">4.2.</span> <span class="toc-text">目錄</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%A3%E7%A2%BC%E5%A1%8A"><span class="toc-number">5.</span> <span class="toc-text">代碼塊</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%A2%BC%E9%AB%98%E4%BA%AE%E4%B8%BB%E9%A1%8C"><span class="toc-number">5.1.</span> <span class="toc-text">代碼高亮主題</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%A2%BC%E6%A1%86%E5%B1%95%E9%96%8B-%E9%97%9C%E9%96%89"><span class="toc-number">5.2.</span> <span class="toc-text">代碼框展開&#x2F;關閉</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%A2%BC%E6%8F%9B%E8%A1%8C"><span class="toc-number">5.3.</span> <span class="toc-text">代碼換行</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%A2%BC%E9%AB%98%E5%BA%A6%E9%99%90%E5%88%B6"><span class="toc-number">5.4.</span> <span class="toc-text">代碼高度限制</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A4%BE%E4%BA%A4%E5%9C%96%E6%A8%99"><span class="toc-number">6.</span> <span class="toc-text">社交圖標</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9C%96%E7%89%87%E8%A8%AD%E7%BD%AE"><span class="toc-number">7.</span> <span class="toc-text">圖片設置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A0%AD%E5%83%8F"><span class="toc-number">7.1.</span> <span class="toc-text">頭像</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A0%82%E9%83%A8%E5%9C%96"><span class="toc-number">7.2.</span> <span class="toc-text">頂部圖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A0%81%E8%85%B3%E8%83%8C%E6%99%AF%E5%9C%96"><span class="toc-number">7.3.</span> <span class="toc-text">頁腳背景圖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B6%B2%E7%AB%99%E8%83%8C%E6%99%AF"><span class="toc-number">7.4.</span> <span class="toc-text">網站背景</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E5%B0%81%E9%9D%A2"><span class="toc-number">8.</span> <span class="toc-text">文章封面</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A0%81%E9%9D%A2-meta-%E9%A1%AF%E7%A4%BA"><span class="toc-number">9.</span> <span class="toc-text">頁面 meta 顯示</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A6%96%E9%A0%81"><span class="toc-number">10.</span> <span class="toc-text">首頁</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A6%96%E9%A0%81%E9%A0%82%E9%83%A8%E5%9C%96%E5%A4%A7%E5%B0%8F"><span class="toc-number">10.1.</span> <span class="toc-text">首頁頂部圖大小</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B6%B2%E7%AB%99%E5%89%AF%E6%A8%99%E9%A1%8C"><span class="toc-number">10.2.</span> <span class="toc-text">網站副標題</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A6%96%E9%A0%81%E5%8D%A1%E7%89%87%E4%BD%88%E5%B1%80"><span class="toc-number">10.3.</span> <span class="toc-text">首頁卡片佈局</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BB%E9%A0%81%E6%96%87%E7%AB%A0%E7%AF%80%E9%81%B8"><span class="toc-number">10.4.</span> <span class="toc-text">主頁文章節選</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E9%A0%81"><span class="toc-number">11.</span> <span class="toc-text">文章頁</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#TOC-%E7%9B%AE%E9%8C%84"><span class="toc-number">11.1.</span> <span class="toc-text">TOC 目錄</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%82%BA%E7%89%B9%E5%AE%9A%E7%9A%84%E6%96%87%E7%AB%A0%E9%85%8D%E7%BD%AE"><span class="toc-number">11.1.1.</span> <span class="toc-text">為特定的文章配置</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E7%89%88%E6%AC%8A"><span class="toc-number">11.2.</span> <span class="toc-text">文章版權</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E6%89%93%E8%B3%9E-%E8%B4%8A%E5%8A%A9"><span class="toc-number">11.3.</span> <span class="toc-text">文章打賞&#x2F;贊助</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E7%B7%A8%E8%BC%AF%E6%8C%89%E9%88%95"><span class="toc-number">11.4.</span> <span class="toc-text">文章編輯按鈕</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%B8%E9%97%9C%E6%96%87%E7%AB%A0"><span class="toc-number">11.5.</span> <span class="toc-text">相關文章</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E5%88%86%E9%A0%81%E6%8C%89%E9%88%95"><span class="toc-number">11.6.</span> <span class="toc-text">文章分頁按鈕</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E9%81%8E%E6%9C%9F%E6%8F%90%E9%86%92"><span class="toc-number">11.7.</span> <span class="toc-text">文章過期提醒</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A0%81%E8%85%B3"><span class="toc-number">12.</span> <span class="toc-text">頁腳</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%9A%E5%AE%A2%E5%B9%B4%E4%BB%BD"><span class="toc-number">12.1.</span> <span class="toc-text">博客年份</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A0%81%E8%85%B3%E8%87%AA%E5%AE%9A%E7%BE%A9%E6%96%87%E6%9C%AC"><span class="toc-number">12.2.</span> <span class="toc-text">頁腳自定義文本</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Aside"><span class="toc-number">13.</span> <span class="toc-text">Aside</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE"><span class="toc-number">13.1.</span> <span class="toc-text">配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E7%BE%A9%E6%B7%BB%E5%8A%A0%E6%AC%84%E7%9B%AE"><span class="toc-number">13.2.</span> <span class="toc-text">自定義添加欄目</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%B3%E4%B8%8B%E8%A7%92%E6%8C%89%E9%88%95"><span class="toc-number">14.</span> <span class="toc-text">右下角按鈕</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8C%89%E9%88%95%E4%BD%8D%E7%BD%AE"><span class="toc-number">14.1.</span> <span class="toc-text">按鈕位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B0%A1%E7%B9%81%E8%BD%89%E6%8F%9B"><span class="toc-number">14.2.</span> <span class="toc-text">簡繁轉換</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%96%B2%E8%AE%80%E6%A8%A1%E5%BC%8F"><span class="toc-number">14.3.</span> <span class="toc-text">閲讀模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%9C%E9%96%93%E6%A8%A1%E5%BC%8F"><span class="toc-number">14.4.</span> <span class="toc-text">夜間模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%BB%BE%E5%8B%95%E7%8B%80%E6%85%8B%E7%99%BE%E5%88%86%E6%AF%94"><span class="toc-number">14.5.</span> <span class="toc-text">滾動狀態百分比</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8C%89%E9%88%95%E6%8E%92%E5%BA%8F"><span class="toc-number">14.6.</span> <span class="toc-text">按鈕排序</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE"><span class="toc-number">15.</span> <span class="toc-text">全局配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A0%81%E9%9D%A2%E9%8C%A8%E9%BB%9E"><span class="toc-number">15.1.</span> <span class="toc-text">頁面錨點</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9C%96%E7%89%87%E6%8F%8F%E8%BF%B0"><span class="toc-number">15.2.</span> <span class="toc-text">圖片描述</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A4%87%E8%A3%BD%E7%9B%B8%E9%97%9C%E9%85%8D%E7%BD%AE"><span class="toc-number">15.3.</span> <span class="toc-text">複製相關配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E6%95%B8%E7%B5%B1%E8%A8%88"><span class="toc-number">15.4.</span> <span class="toc-text">字數統計</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A8%AA%E5%95%8F%E4%BA%BA%E6%95%B8-busuanzi-UV-%E5%92%8C-PV"><span class="toc-number">15.5.</span> <span class="toc-text">訪問人數 busuanzi (UV 和 PV)</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Math-%E6%95%B8%E5%AD%B8"><span class="toc-number">16.</span> <span class="toc-text">Math 數學</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%90%9C%E7%B4%A2"><span class="toc-number">17.</span> <span class="toc-text">搜索</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%86%E4%BA%AB"><span class="toc-number">18.</span> <span class="toc-text">分享</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A9%95%E8%AB%96"><span class="toc-number">19.</span> <span class="toc-text">評論</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9C%A8%E7%B6%AB%E8%81%8A%E5%A4%A9"><span class="toc-number">20.</span> <span class="toc-text">在綫聊天</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%86%E6%9E%90%E7%B5%B1%E8%A8%88"><span class="toc-number">21.</span> <span class="toc-text">分析統計</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BB%A3%E5%91%8A"><span class="toc-number">22.</span> <span class="toc-text">廣告</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B6%B2%E7%AB%99%E9%A9%97%E8%AD%89"><span class="toc-number">23.</span> <span class="toc-text">網站驗證</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BE%8E%E5%8C%96-%E7%89%B9%E6%95%88"><span class="toc-number">24.</span> <span class="toc-text">美化&#x2F;特效</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E7%BE%A9%E4%B8%BB%E9%A1%8C%E8%89%B2"><span class="toc-number">24.1.</span> <span class="toc-text">自定義主題色</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E5%AD%97%E5%B7%A6%E5%8F%B3%E5%B0%8D%E9%BD%8A"><span class="toc-number">24.2.</span> <span class="toc-text">文字左右對齊</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%BB%91%E8%89%B2%E9%81%AE%E7%BD%A9"><span class="toc-number">24.3.</span> <span class="toc-text">黑色遮罩</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A0%81%E9%9D%A2%E5%8A%A0%E8%BC%89%E5%8B%95%E7%95%AB-preloader"><span class="toc-number">24.4.</span> <span class="toc-text">頁面加載動畫 preloader</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A0%81%E9%9D%A2%E7%BE%8E%E5%8C%96"><span class="toc-number">24.5.</span> <span class="toc-text">頁面美化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E7%BE%A9%E5%AD%97%E9%AB%94%E5%92%8C%E5%AD%97%E9%AB%94%E5%A4%A7%E5%B0%8F"><span class="toc-number">24.6.</span> <span class="toc-text">自定義字體和字體大小</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E5%AD%97%E9%AB%94"><span class="toc-number">24.6.1.</span> <span class="toc-text">全局字體</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Blog-%E6%A8%99%E9%A1%8C%E5%AD%97%E9%AB%94"><span class="toc-number">24.6.2.</span> <span class="toc-text">Blog 標題字體</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%93%E5%AD%97%E6%95%88%E6%9E%9C"><span class="toc-number">24.7.</span> <span class="toc-text">打字效果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E7%89%B9%E6%95%88"><span class="toc-number">24.8.</span> <span class="toc-text">背景特效</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%BC%A0%E6%A8%99%E9%BB%9E%E6%93%8A%E6%95%88%E6%9E%9C"><span class="toc-number">24.9.</span> <span class="toc-text">鼠標點擊效果</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9C%96%E7%89%87%E5%A4%A7%E5%9C%96%E6%9F%A5%E7%9C%8B%E6%A8%A1%E5%BC%8F"><span class="toc-number">25.</span> <span class="toc-text">圖片大圖查看模式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%99%E7%B0%BD%E5%A4%96%E6%8E%9B"><span class="toc-number">26.</span> <span class="toc-text">標簽外掛</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Mermaid"><span class="toc-number">27.</span> <span class="toc-text">Mermaid</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9B%B8%E5%AF%AB%E6%96%B9%E6%B3%95"><span class="toc-number">27.1.</span> <span class="toc-text">書寫方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%A8%99%E7%B0%BD%E5%A4%96%E6%8C%82"><span class="toc-number">27.1.1.</span> <span class="toc-text">標簽外挂</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BB%A3%E7%A2%BC%E5%A1%8A%E6%9B%B8%E5%AF%AB"><span class="toc-number">27.1.2.</span> <span class="toc-text">代碼塊書寫</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Pjax"><span class="toc-number">28.</span> <span class="toc-text">Pjax</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Snackbar-%E5%BD%88%E7%AA%97"><span class="toc-number">29.</span> <span class="toc-text">Snackbar 彈窗</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Instantpage"><span class="toc-number">30.</span> <span class="toc-text">Instantpage</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Pangu"><span class="toc-number">31.</span> <span class="toc-text">Pangu</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#PWA"><span class="toc-number">32.</span> <span class="toc-text">PWA</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Open-Graph"><span class="toc-number">33.</span> <span class="toc-text">Open Graph</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS-%E5%89%8D%E7%B6%B4"><span class="toc-number">34.</span> <span class="toc-text">CSS 前綴</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Inject"><span class="toc-number">35.</span> <span class="toc-text">Inject</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CDN"><span class="toc-number">36.</span> <span class="toc-text">CDN</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#version"><span class="toc-number">36.1.</span> <span class="toc-text">version</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#custom-format"><span class="toc-number">36.2.</span> <span class="toc-text">custom_format</span></a></li></ol></li></ol></div></div><div class="card-widget card-post-series"><div class="item-headline"><i class="fa-solid fa-layer-group"></i><span>系列文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/article/5a8a6c8d.html" title="post"><img src= "/images/2.gif" data-lazy-src="http://up.36992.com/pic/e6/c5/51/e6c551e768092c8655292d89a4034a74.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="post"></a><div class="content"><a class="title" href="/article/5a8a6c8d.html" title="post">post</a><time datetime="2024-10-31T15:27:17.000Z" title="发表于 2024-10-31 23:27:17">2024-10-31</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/fa36e355.html" title="Butterfly 文檔(六) 進階教程"><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-06-cover.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Butterfly 文檔(六) 進階教程"></a><div class="content"><a class="title" href="/article/fa36e355.html" title="Butterfly 文檔(六) 進階教程">Butterfly 文檔(六) 進階教程</a><time datetime="2020-05-28T14:39:25.000Z" title="发表于 2020-05-28 22:39:25">2020-05-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/405e153.html" title="Butterfly 文檔(五) 主題問答"><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-05-cover.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Butterfly 文檔(五) 主題問答"></a><div class="content"><a class="title" href="/article/405e153.html" title="Butterfly 文檔(五) 主題問答">Butterfly 文檔(五) 主題問答</a><time datetime="2020-05-28T14:38:21.000Z" title="发表于 2020-05-28 22:38:21">2020-05-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/d9078dbf.html" title="Butterfly 文檔(四) 標簽外挂"><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/Butterfly-docs-04-cover.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Butterfly 文檔(四) 標簽外挂"></a><div class="content"><a class="title" href="/article/d9078dbf.html" title="Butterfly 文檔(四) 標簽外挂">Butterfly 文檔(四) 標簽外挂</a><time datetime="2020-05-28T14:38:11.000Z" title="发表于 2020-05-28 22:38:11">2020-05-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/a2c7de2.html" title="Butterfly 文檔(三) 主題配置"><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-03-cover.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Butterfly 文檔(三) 主題配置"></a><div class="content"><a class="title" href="/article/a2c7de2.html" title="Butterfly 文檔(三) 主題配置">Butterfly 文檔(三) 主題配置</a><time datetime="2020-05-28T14:36:02.000Z" title="发表于 2020-05-28 22:36:02">2020-05-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/6b50bc45.html" title="Butterfly 文檔(二) 主題頁面"><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/Butterfly-docs-02-cover.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Butterfly 文檔(二) 主題頁面"></a><div class="content"><a class="title" href="/article/6b50bc45.html" title="Butterfly 文檔(二) 主題頁面">Butterfly 文檔(二) 主題頁面</a><time datetime="2020-05-28T14:34:41.000Z" title="发表于 2020-05-28 22:34:41">2020-05-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/70021e6e.html" title="Butterfly 文檔(一) 快速開始"><img src= "/images/2.gif" data-lazy-src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-01-cover.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Butterfly 文檔(一) 快速開始"></a><div class="content"><a class="title" href="/article/70021e6e.html" title="Butterfly 文檔(一) 快速開始">Butterfly 文檔(一) 快速開始</a><time datetime="2020-05-28T14:31:46.000Z" title="发表于 2020-05-28 22:31:46">2020-05-28</time></div></div></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/article/18647ffa.html" title="pytest-qt 测试模态窗体."><img src= "/images/2.gif" data-lazy-src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-9.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="pytest-qt 测试模态窗体."/></a><div class="content"><a class="title" href="/article/18647ffa.html" title="pytest-qt 测试模态窗体.">pytest-qt 测试模态窗体.</a><time datetime="2024-11-27T17:01:35.284Z" title="发表于 2024-11-28 01:01:35">2024-11-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/5a8a6c8d.html" title="post"><img src= "/images/2.gif" data-lazy-src="http://up.36992.com/pic/e6/c5/51/e6c551e768092c8655292d89a4034a74.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="post"/></a><div class="content"><a class="title" href="/article/5a8a6c8d.html" title="post">post</a><time datetime="2024-10-31T15:27:17.000Z" title="发表于 2024-10-31 23:27:17">2024-10-31</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/140ab620.html" title="某网站自动下载音乐mp3和歌词"><img src= "/images/2.gif" data-lazy-src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-6.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="某网站自动下载音乐mp3和歌词"/></a><div class="content"><a class="title" href="/article/140ab620.html" title="某网站自动下载音乐mp3和歌词">某网站自动下载音乐mp3和歌词</a><time datetime="2024-10-31T12:15:16.000Z" title="发表于 2024-10-31 20:15:16">2024-10-31</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/32b656da.html" title="PyQt密码管理系统"><img src= "/images/2.gif" data-lazy-src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-2.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="PyQt密码管理系统"/></a><div class="content"><a class="title" href="/article/32b656da.html" title="PyQt密码管理系统">PyQt密码管理系统</a><time datetime="2024-10-20T14:36:18.000Z" title="发表于 2024-10-20 22:36:18">2024-10-20</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/a0a0fd82.html" title="PyQt5实现桌面小宠物"><img src= "/images/2.gif" data-lazy-src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/material-9.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="PyQt5实现桌面小宠物"/></a><div class="content"><a class="title" href="/article/a0a0fd82.html" title="PyQt5实现桌面小宠物">PyQt5实现桌面小宠物</a><time datetime="2024-10-20T14:28:05.000Z" title="发表于 2024-10-20 22:28:05">2024-10-20</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2019 - 2024 By xing</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="日间和夜间模式切换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><div class="js-pjax"></div><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="true" data-click="false"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>(() => {
  const pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"]

  window.pjax = new Pjax({
    elements: 'a:not([target="_blank"])',
    selectors: pjaxSelectors,
    cacheBust: false,
    analytics: false,
    scrollRestoration: false
  })

  const triggerPjaxFn = (val) => {
    if (!val) return
    Object.values(val).forEach(fn => fn())
  }

  document.addEventListener('pjax:send', () => {
    // removeEventListener
    btf.removeGlobalFnEvent('pjaxSendOnce')
    btf.removeGlobalFnEvent('themeChange')

    // reset readmode
    const $bodyClassList = document.body.classList
    if ($bodyClassList.contains('read-mode')) $bodyClassList.remove('read-mode')

    triggerPjaxFn(window.globalFn.pjaxSend)
  })

  document.addEventListener('pjax:complete', () => {
    btf.removeGlobalFnEvent('pjaxCompleteOnce')
    document.querySelectorAll('script[data-pjax]').forEach(item => {
      const newScript = document.createElement('script')
      const content = item.text || item.textContent || item.innerHTML || ""
      Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
      newScript.appendChild(document.createTextNode(content))
      item.parentNode.replaceChild(newScript, item)
    })

    triggerPjaxFn(window.globalFn.pjaxComplete)
  })

  document.addEventListener('pjax:error', e => {
    if (e.request.status === 404) {
      pjax.loadUrl('/404.html')
    }
  })
})()</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div></body></html>